:root{
--yellow:#F6A801; --yellow-deep:#D99200; --black:#111111; --cream:#FBF6EC; --white:#FFFFFF;
--bg:var(--cream); --ink:var(--black); --muted:#5b5348; --card:var(--white); --line:#e8dfcc; --soft:#f4ead3;
--display:"Fredoka","Nunito","Trebuchet MS",system-ui,sans-serif;
--body:"Nunito","Segoe UI",system-ui,-apple-system,sans-serif;
--wrap:1180px;
box-sizing:border-box;
padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]){ --bg:#171512; --ink:#FBF6EC; --muted:#c9bea9; --card:#211e1a; --line:#36312a; --soft:#2a251f; }
}
:root[data-theme="dark"]{ --bg:#171512; --ink:#FBF6EC; --muted:#c9bea9; --card:#211e1a; --line:#36312a; --soft:#2a251f; }
*,*::before,*::after{box-sizing:inherit}
html{scroll-behavior:smooth; scroll-padding-top:calc(96px + env(safe-area-inset-top,0px))}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
html,body{overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{max-width:100%}
a{color:inherit}
:focus-visible{outline:3px solid var(--yellow);outline-offset:3px;border-radius:6px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.08;margin:0;letter-spacing:-.01em}
h2{font-size:clamp(34px,4.6vw,58px)}
h3{font-size:24px}
p{margin:0}
.lede{font-size:clamp(18px,1.7vw,21px);color:var(--muted);max-width:60ch}
section{padding:100px 0}
@media (max-width:900px){section{padding:80px 0}}
@media (max-width:620px){section{padding:60px 0}}
.logo-round{display:inline-block} /* (2026-10-29) the school's round logo is no longer part of ch1 */
/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--display);font-weight:600;font-size:18px;
padding:15px 26px;border-radius:999px;border:2px solid transparent;text-decoration:none;cursor:pointer;line-height:1;transition:transform .15s ease, box-shadow .15s ease}
.btn:active{transform:translateY(2px)}
.btn-yellow{background:var(--yellow);color:var(--black);box-shadow:0 5px 0 var(--yellow-deep)}
.btn-yellow:hover{box-shadow:0 3px 0 var(--yellow-deep);transform:translateY(2px)}
.btn-ghost{background:transparent;color:inherit;border-color:currentColor}
.btn-ghost:hover{background:rgba(246,168,1,.12)}
.btn-dark{background:var(--black);color:var(--cream);box-shadow:0 5px 0 #000}
.btn-dark:hover{transform:translateY(2px);box-shadow:0 3px 0 #000}
/* Nav: floating pill */
.nav{position:fixed;top:calc(14px + env(safe-area-inset-top,0px));left:0;right:0;z-index:50;padding:0 16px;pointer-events:none}
.nav .wrap{pointer-events:auto;max-width:1180px;display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px;padding:0 10px;
/* glass pill: frosted blur, a soft top sheen and a light rim */
background:linear-gradient(180deg,rgba(255,255,255,.13) 0%,rgba(255,255,255,.04) 48%,rgba(255,255,255,0) 100%),rgba(17,17,17,.42);
backdrop-filter:blur(22px) saturate(1.8);-webkit-backdrop-filter:blur(22px) saturate(1.8);
border:1px solid rgba(255,255,255,.07);border-radius:999px;
box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 10px 30px rgba(0,0,0,.22);transition:background .25s, box-shadow .25s}
.nav.scrolled .wrap{background:linear-gradient(180deg,rgba(255,255,255,.12) 0%,rgba(255,255,255,.03) 48%,rgba(255,255,255,0) 100%),rgba(17,17,17,.55);
box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 14px 40px rgba(0,0,0,.3)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.nav .brand .logo-round{width:46px;height:46px}
.foot .brand .logo-round{width:84px;height:84px}
.nav ul{display:flex;gap:4px;list-style:none;margin:0;padding:0}
.nav ul a{display:block;white-space:nowrap;color:var(--cream);text-decoration:none;font-weight:700;font-size:15px;padding:9px 12px;border-radius:999px;opacity:.85;transition:background .15s,color .15s}
.nav ul a:hover{opacity:1;background:rgba(246,168,1,.16);color:var(--yellow)}
.nav ul a.active{opacity:1;background:var(--cream);color:var(--black)}
.nav .btn{padding:12px 20px;font-size:15px;box-shadow:none}
.nav .btn:hover{transform:none;box-shadow:none;filter:brightness(1.06)}
.menu-btn{display:none;background:rgba(251,246,236,.1);border:0;color:var(--cream);font-size:22px;cursor:pointer;width:46px;height:46px;border-radius:50%}
@media (max-width:1200px){
.nav ul{display:none;position:absolute;top:calc(100% + 10px);left:16px;right:16px;background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,0) 40%),rgba(17,17,17,.78);backdrop-filter:blur(22px) saturate(1.8);-webkit-backdrop-filter:blur(22px) saturate(1.8);
border:1px solid rgba(255,255,255,.07);border-radius:26px;flex-direction:column;gap:2px;padding:10px;box-shadow:0 14px 40px rgba(0,0,0,.3)}
.nav ul.open{display:flex}
/* phones: a blur inside the glass pill doesn't render, so the open menu is solid */
.nav ul{left:-1px;right:-1px;background:#161513!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;box-shadow:0 18px 40px rgba(0,0,0,.45)}
.nav.scrolled .wrap,.nav.menu-open .wrap{background:linear-gradient(180deg,rgba(255,255,255,.1) 0%,rgba(255,255,255,.02) 48%,rgba(255,255,255,0) 100%),rgba(17,17,17,.86)}
.nav ul a{font-size:17px;padding:13px 18px}
.menu-btn{display:flex;align-items:center;justify-content:center}
.nav .btn{display:none}
.nav .wrap{height:60px}
}
/* Hero */
.hero{background:var(--black);color:var(--cream);padding:150px 0 0;position:relative;overflow:hidden}
.hero .wrap{position:relative;z-index:2}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}
.hero h1{font-size:clamp(48px,7.4vw,104px);font-weight:700;line-height:.98}
.hero h1 .row{display:block}
.hero h1 .row:nth-child(2){color:var(--yellow)}
.hero .lede{color:#d8cfbd;margin-top:26px}
.hero-ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.hero-ctas .btn-ghost{color:var(--cream)}
.hero-proof{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:30px;font-weight:700;font-size:15px;color:#bfb6a4}
.hero-proof span{display:inline-flex;align-items:center;gap:8px}
.hero-proof b{color:var(--yellow);font-family:var(--display);font-size:20px}
.hero-badge{justify-self:center;position:relative;width:min(420px,80vw);aspect-ratio:1}
.hero-badge .logo-round{position:absolute;inset:0;width:100%;height:100%}
.hero-badge .ring{position:absolute;inset:-26px;border:2px dashed rgba(246,168,1,.4);border-radius:50%;animation:spin 60s linear infinite}
.sticker{position:absolute;background:var(--cream);color:var(--black);font-family:var(--display);font-weight:600;font-size:16px;padding:10px 16px;border-radius:16px;box-shadow:0 6px 0 rgba(0,0,0,.35);white-space:nowrap}
.sticker.s1{top:2%;left:-14%;transform:rotate(-7deg)}
.sticker.s2{top:-3%;right:-14%;transform:rotate(6deg);background:var(--yellow)}
.sticker.s3{bottom:-3%;right:-8%;transform:rotate(-4deg)}
@keyframes spin{to{transform:rotate(360deg)}}
@media (max-width:620px){.kb{min-width:520px;height:190px}}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr}.hero-badge{width:min(300px,70vw);margin-top:20px}.sticker.s1{left:-8%}.sticker.s2{right:-8%}.sticker.s3{right:-4%}}
/* Playable keyboard */
.kb-wrap{margin-top:70px;position:relative}
.kb-hint{display:flex;justify-content:space-between;align-items:end;gap:16px;margin-bottom:14px;color:#bfb6a4;font-weight:700;font-size:15px}
.kb-hint strong{color:var(--cream);font-family:var(--display);font-size:20px;font-weight:600}
.kb-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.kb{position:relative;display:flex;height:220px;min-width:700px;user-select:none;-webkit-user-select:none;touch-action:pan-x}
.kw{flex:1;background:var(--cream);border:2px solid var(--black);border-top:0;border-radius:0 0 12px 12px;position:relative;cursor:pointer;display:flex;align-items:flex-end;justify-content:center;padding-bottom:12px;
font-family:var(--display);font-weight:600;color:#a39a88;font-size:15px;transition:background .06s}
.kw.on{background:var(--yellow);color:var(--black)}
.kb-black{position:absolute;top:0;width:calc(100%/14*.62);height:60%;background:var(--black);border:2px solid #000;border-top:0;border-radius:0 0 8px 8px;cursor:pointer;z-index:2;
box-shadow:inset 0 -8px 0 #2b2b2b;transform:translateX(-50%)}
.kb-black.on{background:var(--yellow-deep);box-shadow:inset 0 -3px 0 #a86f00}
.kb-bubble{position:absolute;top:-56px;transform:translateX(-50%);background:var(--yellow);color:var(--black);font-family:var(--display);font-weight:700;font-size:20px;
padding:6px 14px;border-radius:12px;pointer-events:none;animation:pop .7s ease forwards}
@keyframes pop{0%{opacity:0;transform:translate(-50%,10px) scale(.7)}20%{opacity:1;transform:translate(-50%,0) scale(1)}100%{opacity:0;transform:translate(-50%,-26px)}}
.kb-side{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.chord-pill{display:flex;align-items:center;gap:12px;background:#262420;border:1px solid #3a3630;border-radius:999px;padding:6px 18px 6px 6px;min-width:230px;transition:background .15s,border-color .15s}
.chord-pill.live{background:var(--yellow);border-color:var(--yellow)}
.chord-pill.live b,.chord-pill.live small{color:var(--black)}
.chord-emo{width:42px;height:42px;border-radius:50%;background:var(--black);display:grid;place-items:center;font-size:22px;flex:0 0 42px}
.chord-pill b{display:block;font-family:var(--display);font-weight:700;font-size:22px;line-height:1.05;color:var(--cream)}
.chord-pill small{display:block;font-size:13px;font-weight:700;color:#bfb6a4;line-height:1.3}
.midi-btn{display:inline-flex;align-items:center;gap:8px}
.midi-btn .dot{width:9px;height:9px;border-radius:50%;background:#6b655b}
.midi-btn.on .dot{background:#3ddc84;box-shadow:0 0 0 4px rgba(61,220,132,.2)}
@media (max-width:700px){.kb-hint{flex-direction:column;align-items:stretch}.kb-side{justify-content:flex-start}.chord-pill{flex:1}}
.kb-songs{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px;padding-bottom:28px}
.chip{background:#262420;color:var(--cream);border:1px solid #3a3630;font-weight:700;font-size:14px;border-radius:999px;padding:8px 14px;cursor:pointer;font-family:var(--body)}
.chip:hover,.chip[aria-pressed="true"]{background:var(--yellow);color:var(--black);border-color:var(--yellow)}
/* Marquee */
.ticker{background:var(--yellow);color:var(--black);overflow:hidden;padding:9px 0;border-top:3px solid var(--black);border-bottom:3px solid var(--black)}
.ticker-track{display:flex;gap:48px;width:max-content;animation:marquee 32s linear infinite;font-family:var(--display);font-weight:600;font-size:20px;line-height:1.3;white-space:nowrap}
.ticker-track span::after{content:"♪";margin-left:48px}
@keyframes marquee{to{transform:translateX(-50%)}}
/* Pictures that stick */
.metaphors{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;margin-top:50px}
.meta{background:var(--card);border:2px solid var(--ink);border-radius:22px;padding:24px 20px 22px;text-align:center;box-shadow:6px 6px 0 var(--ink)}
.meta:nth-child(odd){transform:rotate(-1.2deg)}
.meta:nth-child(even){transform:rotate(1.2deg)}
.meta .emo{font-size:46px;line-height:1;display:block;margin-bottom:12px}
.meta h3{font-size:20px;margin-bottom:6px}
.meta p{font-size:15px;color:var(--muted)}
@media (max-width:1000px){.metaphors{grid-template-columns:repeat(2,1fr)}.meta:last-child{grid-column:1/-1}}
@media (max-width:520px){.metaphors{grid-template-columns:1fr}}
/* The Way: staircase */
.way{background:var(--soft)}
.way-head{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:end}
.song-pair{background:var(--black);color:var(--cream);border-radius:22px;padding:22px 24px}
.song-pair h3{font-size:19px;color:var(--yellow);margin-bottom:12px}
.song-pair ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.song-pair li{display:flex;justify-content:space-between;gap:12px;font-weight:700}
.song-pair li small{color:#bfb6a4;font-weight:600}
@media (max-width:860px){.way-head{grid-template-columns:1fr}}
.stairs{display:flex;align-items:flex-end;gap:8px;height:360px;margin-top:56px;overflow-x:auto;padding-bottom:4px}
.step{flex:1 0 82px;background:var(--card);border:2px solid var(--ink);border-radius:14px 14px 6px 6px;cursor:pointer;display:flex;flex-direction:column;justify-content:space-between;
padding:14px 10px;text-align:center;font-family:var(--display);color:var(--ink);transition:transform .15s, background .15s}
@media (hover:hover) and (pointer:fine){.step:hover{transform:translateY(-6px)}}
.step[aria-selected="true"]{background:var(--yellow);color:var(--black);border-color:var(--black)}
.step .num{font-size:30px;font-weight:700;line-height:1}
.step .nm{font-size:14px;font-weight:600;line-height:1.15}
.level-card{margin-top:24px;background:var(--card);border:2px solid var(--ink);border-radius:24px;padding:30px;display:grid;grid-template-columns:auto 1fr auto;gap:28px;align-items:center}
.level-card .big{font-family:var(--display);font-size:72px;font-weight:700;line-height:1;color:var(--yellow);-webkit-text-stroke:2px var(--ink)}
.level-card h3{font-size:30px}
.level-card .range{font-weight:800;color:var(--muted);font-size:15px;margin-top:4px}
.level-card p.topics{margin-top:10px;max-width:62ch}
@media (max-width:760px){.level-card{grid-template-columns:1fr;text-align:left}.level-card .big{font-size:56px}}
.way-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px}
.fact{border-top:3px solid var(--ink);padding-top:14px}
.fact h3{font-size:20px;margin-bottom:6px}
.fact p{color:var(--muted);font-size:16px}
@media (max-width:760px){.way-facts{grid-template-columns:1fr}}
/* Lead magnet */
.lead{background:var(--yellow);color:var(--black);position:relative;overflow:hidden}
.lead-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.lead .lede{color:#3a2e12}
.pack{position:relative;height:340px;margin-top:36px}
.sheet{position:absolute;width:210px;aspect-ratio:210/297;background:var(--cream);border:2px solid var(--black);border-radius:8px;box-shadow:8px 8px 0 var(--black);padding:16px;display:flex;flex-direction:column;gap:10px}
.sheet .logo-round{width:34px;height:34px}
.sheet b{font-family:var(--display);font-size:20px;line-height:1.1}
.sheet .bar{height:8px;border-radius:4px;background:#e7dcc4}
.sheet .bar.y{background:var(--yellow);width:60%}
.sheet .mini-kb{display:flex;height:46px;margin-top:auto;border:2px solid var(--black);border-radius:0 0 6px 6px;overflow:hidden}
.sheet .mini-kb i{flex:1;border-right:1px solid var(--black);background:#fff}
.sheet .mini-kb i:nth-child(3){background:var(--yellow)}
.sheet.a{left:0;top:30px;transform:rotate(-8deg)}
.sheet.b{left:150px;top:0;transform:rotate(5deg);z-index:2}
.form{background:var(--cream);border:3px solid var(--black);border-radius:26px;padding:32px;box-shadow:10px 10px 0 var(--black);color:var(--black)}
.form h3{font-size:28px;margin-bottom:6px}
.form p.small{font-size:15px;color:#5b5348;margin-bottom:20px}
.field{display:grid;gap:6px;margin-bottom:16px}
.field label,.field legend{font-weight:800;font-size:15px}
.field input[type=text],.field input[type=email]{font:inherit;padding:14px 16px;border:2px solid var(--black);border-radius:14px;background:#fff;color:var(--black)}
fieldset.field{border:0;padding:0;margin:0 0 16px}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pills label{position:relative}
.pills input{position:absolute;opacity:0;pointer-events:none}
.pills span{display:inline-block;padding:9px 14px;border:2px solid var(--black);border-radius:999px;font-weight:700;font-size:15px;cursor:pointer;background:#fff}
.pills input:checked+span{background:var(--black);color:var(--yellow)}
.pills input:focus-visible+span{outline:3px solid var(--yellow-deep);outline-offset:2px}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:#3d362c;margin:4px 0 18px}
.consent input{margin-top:4px;width:18px;height:18px;accent-color:var(--black)}
.form .btn{width:100%}
.form-msg{font-weight:700;font-size:15px;margin-top:12px;min-height:1.2em}
.form-msg.err{color:#a3261b}
.unlocked{text-align:center;padding:10px 0}
.unlocked .emo{font-size:56px}
.unlocked h3{margin:8px 0}
.unlocked .btn{margin-top:16px}
@media (max-width:900px){.lead-grid{grid-template-columns:1fr}.pack{height:300px}}
/* Shop */
.shop-head{display:flex;justify-content:space-between;align-items:end;gap:30px;flex-wrap:wrap}
.pay-note{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--muted);font-size:15px}
.pay-note b{background:var(--ink);color:var(--bg);padding:4px 10px;border-radius:8px;font-family:var(--display);font-weight:600}
.shop{display:grid;grid-template-columns:1.25fr 1fr;gap:22px;margin-top:44px}
.prod{background:var(--card);border:2px solid var(--ink);border-radius:24px;padding:28px;display:flex;flex-direction:column;gap:14px}
.prod.hero-prod{background:var(--black);color:var(--cream);border-color:var(--black);grid-row:span 2;position:relative;overflow:hidden}
.prod.hero-prod .tag{align-self:flex-start;background:var(--yellow);color:var(--black);font-family:var(--display);font-weight:600;padding:6px 12px;border-radius:10px;font-size:15px}
.prod h3{font-size:28px}
.prod.hero-prod h3{font-size:clamp(30px,3.4vw,44px)}
.prod .desc{color:var(--muted)}
.prod.hero-prod .desc{color:#cfc6b4}
.price{font-family:var(--display);font-weight:700;font-size:40px;line-height:1}
.price small{font-size:18px;font-weight:600;margin-right:6px}
.price s{font-size:20px;opacity:.5;margin-left:10px;font-weight:500}
.prod ul.inc{list-style:none;padding:0;margin:4px 0;display:grid;gap:8px}
.prod ul.inc li{display:flex;gap:10px;align-items:flex-start}
.prod ul.inc li::before{content:"";flex:0 0 18px;height:18px;margin-top:4px;border-radius:50%;background:var(--yellow);box-shadow:inset 0 0 0 5px var(--black)}
.prod .buy{margin-top:auto;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.lvl-select{font:inherit;font-weight:700;padding:13px 14px;border:2px solid var(--ink);border-radius:14px;background:var(--card);color:var(--ink);min-width:0;flex:1}
.prod.hero-prod>*:not(.mini-stairs){position:relative;z-index:1}
.mini-stairs{position:absolute;z-index:0;right:-10px;bottom:-10px;display:flex;align-items:flex-end;gap:5px;opacity:.16}
.mini-stairs i{width:22px;background:var(--yellow);border-radius:4px 4px 0 0}
.sheets{grid-column:1/-1;background:var(--card);border:2px solid var(--ink);border-radius:24px;padding:28px}
.sheets-top{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap;margin-bottom:18px}
.sheet-list{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.sheet-item{display:flex;align-items:center;justify-content:space-between;gap:12px;border:2px solid var(--line);border-radius:16px;padding:14px 16px}
.sheet-item b{font-family:var(--display);font-weight:600;font-size:18px;display:block;line-height:1.2}
.sheet-item small{color:var(--muted);font-weight:700}
.sheet-item .btn{padding:10px 16px;font-size:15px;flex:0 0 auto}
@media (max-width:980px){.shop{grid-template-columns:1fr}.prod.hero-prod{grid-row:auto}.sheet-list{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.sheet-list{grid-template-columns:1fr}}
/* Lessons */
.lessons{background:var(--black);color:var(--cream)}
.lessons .lede{color:#cfc6b4}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px}
.plan{border:2px solid #3a3630;border-radius:24px;padding:28px;display:flex;flex-direction:column;gap:10px;background:#1a1916}
.plan.pop{border-color:var(--yellow);background:#221d12}
.plan .n{font-family:var(--display);font-size:64px;font-weight:700;line-height:1;color:var(--yellow)}
.plan h3{font-size:22px}
.plan p{color:#cfc6b4}
.perks{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:40px}
.perk{display:flex;gap:14px;align-items:flex-start}
.perk .emo{font-size:30px;line-height:1}
.perk b{display:block;font-family:var(--display);font-weight:600;font-size:18px}
.perk span{color:#bfb6a4;font-size:15px}
.lessons-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:44px}
.lessons-cta .btn-ghost{color:var(--cream)}
@media (max-width:900px){.plans{grid-template-columns:1fr}.perks{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.perks{grid-template-columns:1fr}}
/* About */
.about-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:center}
.portrait{position:relative;aspect-ratio:4/5;border-radius:30px;background:var(--card);box-shadow:10px 10px 0 var(--yellow);border:3px solid var(--ink);overflow:hidden;display:grid;place-items:center}
.portrait .logo-round{width:62%;aspect-ratio:1}
.portrait .ph{position:absolute;bottom:16px;left:16px;right:16px;background:var(--cream);color:var(--black);border-radius:14px;padding:10px 14px;font-weight:700;font-size:14px;text-align:center}
.vision{font-family:var(--display);font-weight:600;font-size:clamp(32px,4vw,52px);line-height:1.08;margin:22px 0 26px}
.vision::before{content:"“";color:var(--yellow)}
.vision::after{content:"”";color:var(--yellow)}
.about p+p{margin-top:16px}
.about .sig{margin-top:22px;font-family:var(--display);font-weight:600;font-size:22px}
.about .sig small{display:block;font-family:var(--body);font-size:15px;color:var(--muted);font-weight:700}
@media (max-width:900px){.about-grid{grid-template-columns:1fr}.portrait{max-width:380px}}
/* FAQ */
.faq-list{margin-top:40px;border-top:2px solid var(--ink)}
.faq-list details{border-bottom:2px solid var(--ink)}
.faq-list summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 4px;font-family:var(--display);font-weight:600;font-size:22px}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";flex:0 0 40px;height:40px;border-radius:50%;background:var(--yellow);color:var(--black);display:grid;place-items:center;font-size:26px;transition:transform .2s}
.faq-list details[open] summary::after{transform:rotate(45deg)}
.faq-list details p{padding:0 4px 24px;color:var(--muted);max-width:70ch}
/* Final CTA + footer */
.final{background:var(--yellow);color:var(--black);text-align:center;padding:90px 0}
.final h2{max-width:16ch;margin:0 auto}
.final .row{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:30px}
footer{background:var(--black);color:var(--cream);padding:64px 0 36px}
.foot{display:grid;grid-template-columns:1.2fr 1fr auto;gap:40px;align-items:center}
.foot .brand .logo-round{width:84px;height:84px}
.foot .foot p{color:#bfb6a4;font-size:15px;margin-top:14px;max-width:36ch}
.foot nav{display:grid;grid-template-columns:1fr 1fr;gap:8px 24px}
.foot nav a{text-decoration:none;font-weight:700;color:#d8cfbd}
.foot nav a:hover{color:var(--yellow)}
.qr-box{display:flex;align-items:center;gap:16px;background:var(--cream);color:var(--black);border-radius:20px;padding:14px 18px 14px 14px;text-decoration:none;border:3px solid var(--yellow)}
.qr-box svg{width:96px;height:96px;display:block;border-radius:8px}
.qr-box b{display:block;font-family:var(--display);font-weight:600;font-size:18px}
.qr-box span{font-size:14px;font-weight:700;color:#5b5348}
.foot-bottom{margin-top:44px;padding-top:22px;border-top:1px solid #2c2a26;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:#8f877a;font-size:14px;font-weight:600}
.foot-bottom button{background:none;border:0;color:inherit;font:inherit;text-decoration:underline;cursor:pointer;padding:0}
@media (max-width:900px){.foot{grid-template-columns:1fr}}
/* Consent banner */
/* Thank-you modal */
.modal{position:fixed;inset:0;z-index:90;background:rgba(17,17,17,.7);display:none;align-items:center;justify-content:center;padding:20px}
.modal.show{display:flex}
.modal-card{background:var(--cream);color:var(--black);border:3px solid var(--black);border-radius:26px;box-shadow:10px 10px 0 var(--yellow);padding:34px;max-width:480px;width:100%;text-align:center}
.modal-card .emo{font-size:58px;line-height:1}
.modal-card h3{font-size:30px;margin:12px 0 8px}
.modal-card p{color:#5b5348}
.modal-card .row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:22px}
.co-steps{display:grid;gap:12px;text-align:left;margin-top:18px}
.co-steps>div{display:flex;gap:12px;align-items:flex-start}
.co-steps span{flex:0 0 30px;height:30px;border-radius:50%;background:var(--black);color:var(--yellow);display:grid;place-items:center;font-family:var(--display);font-weight:600}
.co-steps p{color:var(--black);margin-top:3px}
.co-field{flex:1;display:grid;gap:6px}
.co-field label{font-weight:800;font-size:15px;color:var(--black)}
.co-field input{font:inherit;padding:11px 14px;border:2px solid var(--black);border-radius:12px;background:#fff;color:var(--black);width:100%}
.co-msg{font-size:14px;margin-top:16px}
.co-msg.err{color:#a3261b;font-weight:700}
.co-code{font:inherit;font-weight:800;background:var(--yellow);border:2px dashed var(--black);border-radius:8px;padding:1px 8px;cursor:pointer;color:var(--black)}
/* TCH AI */
.ai-chord{background:var(--cream);color:var(--black);border-color:var(--cream)}
.ai-fab{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:70;display:inline-flex;align-items:center;gap:8px;border:0;cursor:pointer;
background:var(--black);color:var(--cream);font-family:var(--display);font-weight:600;font-size:17px;padding:14px 20px;border-radius:999px;box-shadow:0 10px 30px rgba(0,0,0,.3),inset 0 0 0 2px var(--yellow)}
.ai-fab span{font-size:20px}
.ai-fab:hover{background:#000}
.ai-panel{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:75;width:min(400px,calc(100vw - 36px));height:min(600px,calc(100vh - 120px));height:min(600px,calc(100dvh - 120px));
display:flex;flex-direction:column;background:var(--cream);color:var(--black);border-radius:28px;box-shadow:0 20px 60px rgba(0,0,0,.35);overflow:hidden;border:1px solid rgba(0,0,0,.08)}
.ai-panel[hidden]{display:none}
.ai-head{display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--black);color:var(--cream)}
.ai-head .logo-round{width:40px;height:40px;flex:0 0 40px}
.ai-head b{display:block;font-family:var(--display);font-weight:600;font-size:18px;line-height:1.1}
.ai-head small{color:#bfb6a4;font-weight:700;font-size:13px}
.ai-head div{flex:1}
.ai-x{width:40px;height:40px;flex:0 0 40px;padding:0;display:grid;place-items:center;border-radius:50%;border:0;background:rgba(251,246,236,.12);color:var(--cream);cursor:pointer}
.ai-x svg{display:block;flex:none;max-width:none;width:14px;height:14px}
.ai-log{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px}
.msg{max-width:88%;padding:11px 15px;border-radius:20px;font-size:15px;line-height:1.5;white-space:normal;overflow-wrap:anywhere}
.msg.bot{background:#fff;border:1px solid #eadfc8;border-bottom-left-radius:6px;align-self:flex-start}
.msg.me{background:var(--black);color:var(--cream);border-bottom-right-radius:6px;align-self:flex-end}
.msg p+p,.msg ul{margin-top:8px}
.msg ul{padding-left:18px;margin-bottom:0}
.msg .play{font:inherit;font-weight:800;font-size:14px;border:0;background:var(--yellow);color:var(--black);border-radius:999px;padding:2px 10px;cursor:pointer;white-space:nowrap}
.msg .play::before{content:"▶ ";font-size:11px}
.msg .play small{font-weight:700;font-size:11px;opacity:.75;margin-left:4px}
.msg.cta{background:var(--yellow);border:0}
.msg.cta a{font-weight:800}
.msg.typing{color:#8a8172;font-style:italic}
.ai-sugs{display:flex;flex-wrap:wrap;gap:8px}
.ai-sugs .chip{background:#fff;color:var(--black);border:1px solid #e0d4ba;font-size:13px}
.ai-sugs .chip:hover{background:var(--yellow);border-color:var(--yellow)}
.ai-input{display:flex;gap:8px;padding:10px 12px;border-top:1px solid #eadfc8;background:#fff}
.ai-input input{flex:1;min-width:0;font:inherit;font-size:16px;padding:12px 16px;border:1px solid #d9ccb1;border-radius:999px;background:var(--cream);color:var(--black)}
.ai-input .btn{padding:12px 18px;font-size:15px;box-shadow:none}
.ai-foot{font-size:11px;color:#8a8172;text-align:center;padding:0 12px 10px;background:#fff}
body.ai-open .cookie{display:none}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Alignment pass (Q4 2026) */
h1,h2,h3{text-wrap:balance}
/* Pictures that stick: straight cards, equal heights, last row centred */
.metaphors{display:flex;flex-wrap:wrap;justify-content:center}
.meta,.meta:nth-child(odd),.meta:nth-child(even){transform:none;flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center}
@media (max-width:1000px){.metaphors .meta,.meta:last-child{flex:0 0 calc((100% - 36px)/3);grid-column:auto}}
@media (max-width:620px){.metaphors .meta,.meta:last-child{flex:0 0 100%}}
/* Picture cards: tilt on hover, example pops out underneath */
.meta{position:relative;cursor:pointer;-webkit-tap-highlight-color:transparent;outline:none;transition:transform .25s cubic-bezier(.34,1.45,.55,1),box-shadow .25s}
.meta:nth-child(odd):hover,.meta:nth-child(odd):focus-within,.meta.open:nth-child(odd){transform:rotate(-3deg) translateY(-6px)}
.meta:nth-child(even):hover,.meta:nth-child(even):focus-within,.meta.open:nth-child(even){transform:rotate(3deg) translateY(-6px)}
.meta:hover,.meta:focus-within,.meta.open{z-index:6;box-shadow:8px 10px 0 var(--yellow)}
.meta-tip{position:absolute;left:-6px;right:-6px;top:100%;padding-top:14px;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .2s,transform .25s,visibility 0s .2s;z-index:7}
.meta:hover .meta-tip,.meta:focus-within .meta-tip,.meta.open .meta-tip{opacity:1;visibility:visible;transform:none;transition:opacity .2s,transform .25s}
/* the card tilts, the example stays level */
.meta:nth-child(odd):hover .meta-tip,.meta:nth-child(odd):focus-within .meta-tip,.meta.open:nth-child(odd) .meta-tip{transform:rotate(3deg)}
.meta:nth-child(even):hover .meta-tip,.meta:nth-child(even):focus-within .meta-tip,.meta.open:nth-child(even) .meta-tip{transform:rotate(-3deg)}
.mt-in{position:relative;background:var(--black);color:var(--cream);border-radius:18px;padding:16px 16px 14px;text-align:left;box-shadow:0 14px 30px rgba(0,0,0,.25)}
.mt-in::before{content:"";position:absolute;top:-8px;left:50%;width:16px;height:16px;background:var(--black);transform:translateX(-50%) rotate(45deg);border-radius:3px}
.mt-in p{position:relative;font-size:14px!important;line-height:1.5;color:#e9e1d0!important;margin:0}
.mt-in b{color:var(--yellow)}
.mt-hear{margin-top:12px;display:inline-flex;align-items:center;gap:6px;background:var(--yellow);color:var(--black);border:0;border-radius:999px;padding:8px 14px;font:inherit;font-weight:800;font-size:13px;cursor:pointer}
.mt-hear:hover{filter:brightness(1.06)}
@media (hover:none),(max-width:620px){
.meta-tip{position:static;padding-top:0;max-height:0;overflow:hidden;transform:none;transition:max-height .3s ease,opacity .2s,visibility 0s .3s}
.meta.open .meta-tip{max-height:320px;padding-top:14px;transition:max-height .35s ease,opacity .2s}
.meta:hover .meta-tip,.meta:focus-within .meta-tip{opacity:0;visibility:hidden}
.meta.open .meta-tip{opacity:1;visibility:visible}
.meta:hover,.meta:focus-within{transform:none!important;box-shadow:6px 6px 0 var(--ink)}
.meta.open{box-shadow:8px 10px 0 var(--yellow)}
.meta .meta-tip,.meta.open .meta-tip{transform:none!important}
.mt-in{box-shadow:none}
.meta::after{content:"Tap for an example ↓";display:block;margin-top:10px;font-size:13px;font-weight:800;color:var(--muted)}
.meta.open::after{content:"Tap to close ↑"}
}
/* Staircase: all 10 steps always visible */
.stairs{overflow:visible}
.step{flex:1 1 0;min-width:0}
@media (max-width:1000px){.step{padding:12px 4px}.step .nm{font-size:12.5px}.step .num{font-size:26px}}
@media (max-width:620px){
.stairs{display:grid;grid-template-columns:repeat(5,1fr);height:auto;gap:8px;margin-top:36px}
.stairs .step{height:auto!important;min-height:92px;border-radius:14px;justify-content:flex-start;gap:6px;padding:10px 3px}
.step .nm{font-size:11px;hyphens:auto}
.step .num{font-size:22px}
}
/* Starter pack mock-up stays inside its column */
.pack{width:400px;max-width:100%}
.sheet.a{left:16px}
.sheet.b{left:172px}
@media (max-width:620px){
.pack{width:300px;height:260px;margin:28px auto 0}
.sheet{width:150px;padding:12px;gap:8px}
.sheet b{font-size:16px}
.sheet .mini-kb{height:34px}
.sheet.a{left:12px;top:24px}
.sheet.b{left:128px}
}
/* Form: legends line up with labels */
.field legend{padding:0;margin-bottom:6px}
/* Single level pack: select and button match */
.lvl-select,.prod .buy .btn{height:52px}
@media (max-width:520px){.prod .buy .lvl-select{flex:1 1 100%}.prod .buy .btn{width:100%}}
/* Pay note wraps as one sentence */
.pay-note{display:block;line-height:2}
.pay-note b{display:inline-block;line-height:1.4;margin:0 4px}
/* FAQ: text flush with the rules, centred plus */
.faq-list summary{padding:22px 0}
.faq-list details p{padding:0 0 24px}
.faq-list summary::after{content:"";background:linear-gradient(var(--black),var(--black)) center/14px 3px no-repeat,linear-gradient(var(--black),var(--black)) center/3px 14px no-repeat,var(--yellow)}
/* Footer links never wrap */
.foot nav{grid-template-columns:repeat(2,max-content);column-gap:40px}
.foot nav a{white-space:nowrap}
/* Hero stickers: smaller on tablet and phone so they never touch */
@media (max-width:900px){.sticker{font-size:14px;padding:8px 12px}.sticker.s1{top:6%;left:-12%}.sticker.s2{top:-6%;right:-10%}}
/* Phone: stacked buttons share one width */
@media (max-width:520px){.hero-ctas .btn,.lessons-cta .btn,.final .row .btn{width:100%}}
/* Footer blurb spacing (old selector never matched) and two-line closing headline */
.foot .brand p,.foot>div>p{color:#bfb6a4;font-size:15px;margin-top:16px;max-width:36ch}
.foot .foot-mail{margin-top:10px!important}.foot .foot-mail a{color:var(--yellow);font-weight:800;text-decoration:none}.foot .foot-mail a:hover{text-decoration:underline}
.final h2{max-width:22ch}
.portrait{background:#0d0d0d}
.portrait{border-color:#000}
.portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
/* Touch: slide across the keys to play (glissando); a mini keyboard rail scrolls the keys when they don't fit */
.kb{touch-action:none}
/* the keys run in under the panel: a soft shadow falls on their tops (flat view, every finish) */
body.solo:not(.kv-tilt):not(.kv-stage) #kb::after{content:"";position:absolute;left:0;right:0;top:0;height:18px;pointer-events:none;z-index:3;background:linear-gradient(180deg,rgba(0,0,0,.5) 0,rgba(0,0,0,.2) 7px,rgba(0,0,0,0) 18px)}
/* Classic black keys get their shape: a soft sheen down the lit side, a darker far side, a little light along the top of the cap */
body.solo:not(.real-keys):not(.keys-black):not(.keys-white) #kb .kb-black:not(.on):not(.ln-t):not(.heard):not(.sc-t):not(.sc-ok):not(.sc-no):not(.sg-t):not(.cx-on):not(.lh-auto){
background-image:linear-gradient(90deg,rgba(255,255,255,.09) 0,rgba(255,255,255,.03) 16%,rgba(255,255,255,0) 34%,rgba(255,255,255,0) 70%,rgba(0,0,0,.35) 100%),linear-gradient(180deg,rgba(0,0,0,.35) 0,rgba(0,0,0,0) 18%,rgba(255,255,255,0) 70%,rgba(255,255,255,.06) 86%,rgba(255,255,255,0) 100%)}
@media (max-width:620px){body.solo:not(.kv-tilt):not(.kv-stage) #kb::after{height:12px}}
.kb-rail{display:none;position:relative;height:26px;margin:12px 0 0;border-radius:8px;border:1px solid rgba(246,168,1,.35);overflow:hidden;cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;
background:repeating-linear-gradient(90deg,#f3eee3 0 6px,#8f877a 6px 7px);box-shadow:inset 0 2px 4px rgba(0,0,0,.35)}
.kb-rail.on{display:block}
.kb-rail i{position:absolute;top:0;bottom:0;left:0;border:2px solid #F6A801;border-radius:7px;box-shadow:0 0 0 999px rgba(17,17,17,.6),0 0 10px rgba(246,168,1,.5)}
.kb-rail.drag{cursor:grabbing}
/* Keyboard v2: 3 octaves, bigger keys, Note Houses */
.kb-scroll{padding-top:34px;scrollbar-width:thin}
.kb{height:270px;min-width:0}
.kb .kw{padding-bottom:10px;font-size:13px;flex-direction:column;justify-content:flex-end;align-items:center;border-radius:0 0 10px 10px}
.kb .kw.mid .kn{color:var(--black);background:var(--yellow);border-radius:6px;padding:1px 5px}
.kb .kb-black{width:calc(100% / var(--nw) * .6);height:58%}
.kb-house{position:absolute;top:-30px;height:24px;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:600;font-size:13px;color:#bfb6a4;
border-top:3px solid var(--yellow);border-left:1px solid #3a3630;border-right:1px solid #3a3630;border-radius:8px 8px 0 0;margin:0 3px;white-space:nowrap;overflow:hidden;pointer-events:none;box-sizing:border-box}
.kf{position:absolute;left:50%;bottom:40px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:2px;pointer-events:none;animation:friend 1.3s ease forwards;width:100%}
.kf i{font-style:normal;font-size:28px;line-height:1}
.kf em{font-style:normal;font-family:var(--display);font-weight:700;font-size:10.5px;line-height:1.1;color:var(--black);text-align:center;padding:0 2px}
@keyframes friend{0%{opacity:0;transform:translate(-50%,10px) scale(.6)}15%{opacity:1;transform:translate(-50%,0) scale(1.08)}25%{transform:translate(-50%,0) scale(1)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-6px)}}
@media (max-width:900px){.kb{min-width:960px;height:240px}}
@media (max-width:620px){.kb{min-width:1012px;height:230px}.kf i{font-size:24px}}
/* Instruments */
.inst{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.inst-card{border:2px solid #3a3630;border-radius:24px;padding:28px 24px;background:#1a1916;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px}
.inst-card img{width:96px;height:96px;display:block}
.inst-card h3{font-size:22px;margin-top:4px}
.inst-card p{color:#cfc6b4;font-size:15px;max-width:30ch}
.inst-drums{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:16px;border:2px dashed #3a3630;border-radius:18px;padding:12px 18px}
.inst-drums img{width:52px;height:52px;flex:0 0 52px}
.inst-drums p{color:#cfc6b4;font-size:15px}
.inst-drums b{color:var(--cream);font-family:var(--display);font-weight:600;font-size:17px;margin-right:4px}
.inst+.inst-drums+.plans{margin-top:32px}
@media (max-width:900px){.inst{grid-template-columns:1fr}.inst-card{flex-direction:row;text-align:left;align-items:center;gap:18px;padding:18px}.inst-card img{width:72px;height:72px;flex:0 0 72px}.inst-card h3{margin:0 0 4px}.inst-drums{justify-content:flex-start}}
/* Locked levels */
.step.locked{background:repeating-linear-gradient(135deg,var(--card) 0 10px,var(--soft) 10px 20px)}
.step.locked .nm{font-size:20px;line-height:1}
.step.locked[aria-selected="true"]{background:var(--yellow)}
/* Free trial form */
.trial-points{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:10px;font-weight:700;color:#3a2e12}
.trial-points li{display:flex;gap:10px;align-items:flex-start}
.trial-points li::before{content:"";flex:0 0 18px;height:18px;margin-top:4px;border-radius:50%;background:var(--black);box-shadow:inset 0 0 0 5px var(--yellow)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.field select,.field textarea,.field input[type=tel],.field input[type=number]{font:inherit;padding:14px 16px;border:2px solid var(--black);border-radius:14px;background:#fff;color:var(--black);width:100%;box-sizing:border-box}
.field textarea{resize:vertical;min-height:84px}
.field input{width:100%;box-sizing:border-box}
.field .opt{font-weight:600;color:#7a7062}
.field label{display:block}
.loc{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.loc label{position:relative}
.loc input{position:absolute;opacity:0;pointer-events:none}
.loc span{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;min-height:54px;padding:10px 12px;border:2px solid var(--black);border-radius:14px;background:#fff;font-weight:800;font-size:15px;cursor:pointer;text-align:center}
.loc em{font-style:normal;font-family:var(--display);font-weight:600;font-size:11px;letter-spacing:.04em;background:var(--black);color:var(--yellow);padding:3px 7px;border-radius:6px}
.loc input:checked+span{background:var(--yellow);box-shadow:inset 0 0 0 1px var(--black)}
.loc input:focus-visible+span{outline:3px solid var(--yellow-deep);outline-offset:2px}
.hint{font-size:13px;color:#5b5348;margin-top:8px;line-height:1.45}
.form-foot{font-size:13px;color:#5b5348;text-align:center;margin-top:6px}
@media (max-width:520px){.row2{grid-template-columns:1fr}}
.way-facts{grid-template-columns:repeat(4,1fr)}
@media (max-width:1000px){.way-facts{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.way-facts{grid-template-columns:1fr}}
/* WhatsApp button: brand yellow, sits above Ask TCH AI */
.wa-fab{position:fixed;right:18px;bottom:calc(82px + env(safe-area-inset-bottom,0px));z-index:70;display:inline-flex;align-items:center;justify-content:flex-end;height:52px;min-width:52px;padding:0 6px;box-sizing:border-box;border-radius:999px;
background:var(--yellow);color:var(--black);text-decoration:none;box-shadow:0 10px 30px rgba(0,0,0,.3),inset 0 0 0 2px var(--black);font-family:var(--display);font-weight:600;font-size:16px;transition:transform .15s}
.wa-fab svg{width:40px;height:40px;fill:var(--black);flex:0 0 40px;order:2;display:block}
.wa-fab{width:52px;overflow:hidden;font-size:17px;transition:width .3s cubic-bezier(.2,.8,.2,1),transform .25s cubic-bezier(.34,1.45,.55,1)}
.wa-fab .wa-label{order:1;flex:1;text-align:center;white-space:nowrap;opacity:0;transition:opacity .2s}
.wa-fab:hover,.wa-fab:focus-visible{width:var(--fabw,160px)}
.wa-fab:hover .wa-label,.wa-fab:focus-visible .wa-label{opacity:1}
.wa-fab{transform:rotate(3deg)}
.wa-fab:hover,.wa-fab:focus-visible{transform:rotate(1deg) scale(1.04)}
body.ai-open .wa-fab{display:none}
/* Keyboard: no layout jumps while playing */
#askChord[hidden]{display:inline-flex!important;visibility:hidden}
.kb-side .chord-pill{flex:0 0 300px;width:300px;min-width:0}
.chord-pill>span:last-child{min-width:0;overflow:hidden}
.chord-pill b,.chord-pill small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kb-scroll{overflow-y:hidden}
.kf{width:auto;min-width:100%}
@media (min-width:901px){.kb-scroll{overflow:visible}}
@media (max-width:700px){.kb-side .chord-pill{flex:1 1 100%;width:auto;order:1}.kb-side .midi-btn{order:2}.kb-side #askChord{order:3}}
@media (max-width:700px){#askChord .long{display:none}}
/* Wide wordmark: footer always, menu on wide screens */
.wordmark{display:block;height:auto}
.foot .brand .wordmark{width:240px;max-width:100%}
/* Menu logo: wide wordmark at the top, morphs into the round logo once you scroll */
.nav .brand{position:relative;height:46px;width:122px;flex:0 0 auto;transition:width .5s cubic-bezier(.2,.8,.2,1)}
.nav .brand .wordmark{position:absolute;left:4px;top:50%;height:40px;width:auto;transform:translateY(-50%);transform-origin:left center;
transition:opacity .3s ease,transform .5s cubic-bezier(.2,.8,.2,1)}
.nav .brand .logo-round{position:absolute;left:0;top:0;opacity:0;transform:rotate(-140deg) scale(.4);
transition:opacity .3s ease .08s,transform .6s cubic-bezier(.34,1.45,.55,1) .05s}
@media (max-width:900px){.nav.scrolled .brand{width:46px}}
.nav.scrolled .brand .wordmark{opacity:0;transform:translateY(-50%) scale(.55)}
.nav.scrolled .brand .logo-round{opacity:1;transform:none}
.nav.logo-alt .brand .wordmark{opacity:0;transform:translateY(-50%) scale(.55)}
.nav.logo-alt .brand .logo-round{opacity:1;transform:none}
/* Named locked steps + menu logo spacing */
.step.locked .nm{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:14px;line-height:1.15}
.step.locked .nm .lk{font-style:normal;font-size:20px;line-height:1}
@media (max-width:620px){.step.locked .nm{font-size:11px;gap:3px}.step.locked .nm .lk{font-size:16px}}
/* Chordy: one friendly hello per visit */
.ai-fab{position:fixed}
.ai-hint{position:absolute;right:calc(100% + 12px);top:50%;transform:translate(10px,-50%) rotate(-3deg);transform-origin:right center;opacity:0;pointer-events:none;white-space:nowrap;
background:var(--cream);color:var(--black);font-style:normal;font-family:var(--display);font-weight:600;font-size:15px;padding:9px 14px;border-radius:14px;border:2px solid var(--black);box-shadow:0 6px 18px rgba(0,0,0,.25);transition:opacity .45s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
.ai-hint::after{content:"";position:absolute;right:-8px;top:50%;width:12px;height:12px;background:var(--cream);border-right:2px solid var(--black);border-top:2px solid var(--black);transform:translateY(-50%) rotate(45deg)}
.ai-fab.hello .ai-hint{opacity:1;transform:translate(0,-50%) rotate(-3deg)}
@media (hover:hover){.ai-fab:hover .ai-hint{opacity:1;transform:translate(0,-50%) rotate(-1deg)}}
.ai-fab.hello{animation:wiggle 1.1s ease .2s 1}
@keyframes wiggle{0%,100%{transform:rotate(3deg)}25%{transform:rotate(6deg) scale(1.03)}50%{transform:rotate(0deg) scale(1.03)}75%{transform:rotate(4.5deg)}}
@media (max-width:520px){.ai-hint{font-size:12.5px;padding:6px 10px;right:calc(100% + 10px)}}
.ai-hint .hs{display:none}
@media (max-width:520px){.ai-hint .hl{display:none}.ai-hint .hs{display:inline}}
/* Phone polish */
.hero-proof span{white-space:nowrap}
@media (max-width:520px){
.inst-pills{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
.inst-pills .pk{display:none}
.inst-pills label,.inst-pills label>span{display:block;width:100%;text-align:center;box-sizing:border-box;white-space:nowrap}
.tg-l{display:none}
}
@media (max-width:380px){.ai-hint .he{display:none}}
.pills .pk{font-style:normal}
.pills input,.loc input{left:0;top:0;width:1px;height:1px;margin:0}
/* Chord pill + buttons: one tidy right-aligned block */
.kb-side{display:grid;grid-template-columns:auto auto;justify-content:end;align-items:center;gap:10px}
.kb-side .chord-pill{grid-column:1/-1;justify-self:stretch;width:auto;flex:none}
#askChord,.midi-btn{white-space:nowrap}
.kb-side #askChord{grid-column:1;justify-self:end}
.kb-side .midi-btn{grid-column:2}
@media (max-width:700px){
.kb-side{grid-template-columns:auto minmax(0,1fr);justify-content:stretch;width:100%}
.kb-side .chord-pill{justify-self:stretch;width:auto}
.kb-side .midi-btn{grid-column:1;grid-row:2}
.kb-side #askChord{grid-column:2;grid-row:2;justify-self:start}
}
/* Ask Chordy: a playful tilt */
.ai-fab{transform:rotate(3deg);transition:transform .25s cubic-bezier(.34,1.45,.55,1)}
.ai-fab:hover{transform:rotate(1deg) scale(1.04)}
/* Short trial form: every box the same height and shape */
.form .field input,.form .field select{height:52px;padding:0 16px;border:2px solid var(--black);border-radius:14px;background:#fff;color:var(--black);font:inherit;font-size:16px;width:100%;box-sizing:border-box;margin:0}
.form .field select{appearance:none;-webkit-appearance:none;padding-right:42px;cursor:pointer;
background:#fff url("data:image/svg+xml;utf8,") no-repeat right 16px center}
.form .field textarea{font-size:16px}
.form .row2{align-items:end}
.form .field label,.form .field legend{line-height:1.3;margin-bottom:6px}
.form .field{gap:0}
.area-field .hint{margin-top:8px}
.add-note{display:block;background:none;border:0;padding:0;margin:0 0 16px;font:inherit;font-weight:800;font-size:15px;color:var(--black);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.add-note span{font-weight:600;color:#7a7062;text-decoration:none}
.form .btn{margin-top:4px}
/* Chat quick actions */
.ai-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.ai-act{display:inline-flex;align-items:center;justify-content:center;flex:1 1 auto;min-height:40px;padding:8px 14px;border-radius:999px;border:2px solid var(--black);background:var(--black);color:var(--yellow);
font-family:var(--display);font-weight:600;font-size:15px;text-decoration:none;cursor:pointer;white-space:nowrap}
.ai-act.wa{background:var(--yellow);color:var(--black)}
.ai-act:hover{filter:brightness(1.08)}
.msg.cta .ai-act.wa{background:#fff}
.form [hidden],#leadForm [hidden]{display:none!important}
@media (max-width:520px){.row2.keep{grid-template-columns:minmax(0,2fr) minmax(0,3fr)}.form .field select{padding:0 34px 0 12px;background-position:right 12px center}.form .field input{padding:0 12px}}
@media (max-width:380px){.form .field select{font-size:14.5px;padding-left:10px;padding-right:30px;background-position:right 10px center}}
/* Every step: name sits on the same line, icon row underneath */
.step .nm{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:14px;line-height:1.15}
.step .nm .lk{font-style:normal;font-size:20px;line-height:1}
@media (max-width:620px){.step .nm{font-size:11px;gap:3px}.step .nm .lk{font-size:16px}}
@media (max-width:620px){.stairs .step{justify-content:space-between}}
.way-head>div>.lede:last-child{margin-bottom:0}
/* Level picker: three tiles + one full-width buy button */
.lvl-pick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:4px 0 14px}
.lvl-pick button{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:5px;min-height:78px;padding:14px 6px 10px;border:2px solid var(--ink);border-radius:16px;background:var(--card);color:var(--ink);cursor:pointer;font:inherit;text-align:center;transition:background .15s,transform .15s}
.lvl-pick button b{font-family:var(--display);font-weight:700;font-size:26px;line-height:1}
.lvl-pick button span{font-weight:700;font-size:13px;line-height:1.2;color:var(--muted)}
.lvl-pick button[aria-checked="true"]{background:var(--yellow);border-color:var(--black);color:var(--black)}
.lvl-pick button[aria-checked="true"] span{color:var(--black)}
.lvl-pick button:hover{transform:translateY(-2px)}
.lvl-pick button:focus-visible{outline:3px solid var(--yellow-deep);outline-offset:2px}
.prod .buy .lvl-buy{width:100%;height:auto}
/* Keyboard controls: one tidy row, right-aligned with the keyboard */
.kb-side{display:flex!important;flex-wrap:nowrap;align-items:center;justify-content:flex-end;gap:10px}
.kb-side .chord-pill{flex:0 0 250px!important;width:250px!important;min-width:0;position:relative;padding-right:8px}
.chord-pill .cp-txt{flex:1;min-width:0;overflow:hidden}
.cp-ask{flex:0 0 36px;width:36px;height:36px;border-radius:50%;border:0;background:var(--cream);font-size:17px;cursor:pointer;display:grid;place-items:center;box-shadow:0 2px 0 rgba(0,0,0,.25)}
.cp-ask[hidden]{display:grid!important;visibility:hidden}
.chord-pill.live .cp-ask{background:var(--black)}
.metro-btn{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.metro-ic{width:18px;height:18px;flex:0 0 18px}
.metro-btn.on{background:var(--yellow);color:var(--black);border-color:var(--yellow)}
.metro-btn.on .metro-arm{animation:tick .66s ease-in-out infinite alternate;transform-origin:12px 16px}
@keyframes tick{from{transform:rotate(-28deg)}to{transform:rotate(18deg)}}
@media (max-width:700px){
.kb-side{flex-wrap:wrap!important;justify-content:flex-start}
.kb-side .chord-pill{flex:1 1 100%!important;width:auto!important;order:1}
.kb-side .midi-btn{order:2}
.kb-side .metro-btn{order:3}
}
/* Metronome panel */
.kb-wrap{position:relative}
.metro{position:absolute;right:0;top:auto;z-index:30;width:320px;max-width:calc(100vw - 32px);margin-top:-4px;background:var(--cream);color:var(--black);border:3px solid var(--black);border-radius:22px;padding:16px 18px 18px;box-shadow:8px 8px 0 var(--yellow),0 20px 40px rgba(0,0,0,.35)}
.metro[hidden]{display:none!important}
.mt-top{display:flex;justify-content:space-between;align-items:center;font-family:var(--display);font-size:20px}
.mt-x{border:0;background:#e9e1d1;border-radius:50%;width:32px;height:32px;cursor:pointer;font-size:14px}
.mt-tempo{display:flex;align-items:center;justify-content:space-between;margin:10px 0 6px}
.mt-step{width:46px;height:46px;border-radius:50%;border:2px solid var(--black);background:#fff;font-size:24px;font-weight:800;cursor:pointer;line-height:1}
.mt-bpm{text-align:center}
.mt-bpm span{display:block;font-family:var(--display);font-weight:700;font-size:44px;line-height:1}
.mt-bpm small{font-size:12px;font-weight:700;color:#7a7062}
#mtRange{width:100%;accent-color:var(--black);margin:6px 0 12px}
.mt-styles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.mt-styles button{height:42px;border-radius:12px;border:2px solid var(--black);background:#fff;font:inherit;font-weight:800;font-size:15px;cursor:pointer}
.mt-styles button[aria-checked="true"]{background:var(--black);color:var(--yellow)}
.mt-beats{display:flex;justify-content:center;gap:12px;margin:14px 0}
.mt-beats i{width:16px;height:16px;border-radius:50%;background:#e2d8c4;transition:transform .08s,background .08s}
.mt-beats i:first-child{outline:2px solid #c9bea9;outline-offset:2px}
.mt-beats i.on{background:var(--yellow);transform:scale(1.35)}
.mt-play{width:100%}
/* Metronome: always-readable button text (dark mode too) */
.metro button{color:var(--black)}
.mt-step{display:grid;place-items:center;padding:0;font-family:var(--display)}
.mt-styles button[aria-checked="true"]{color:var(--yellow)}
.mt-play{color:var(--black)}
/* Controls: MIDI + Metronome on top, chord pill underneath (closest to the keys) */
.kb-side{display:grid!important;grid-template-columns:auto auto;justify-content:end;align-items:center;gap:10px}
.kb-side .midi-btn{grid-column:1;grid-row:1;order:0}
.kb-side .metro-btn{grid-column:2;grid-row:1;order:0}
.kb-side .chord-pill{grid-column:1/-1;grid-row:2;width:auto!important;flex:none!important;order:0}
@media (max-width:700px){
.kb-side{grid-template-columns:auto auto;justify-content:start;width:100%}
.kb-side .chord-pill{justify-self:stretch}
}
.mt-step svg,.mt-x svg{display:block}
.mt-x{display:grid;place-items:center;padding:0}
/* Desktop: controls sit lower, in the free space beside the house roofs */
@media (min-width:901px){.kb-side{transform:translateY(30px);position:relative;z-index:3}}
/* Note Houses off: no label strip above the keys, so the chord pill stays in the text row instead of dropping onto the keys */
@media (min-width:901px){body.kids-off .kb-side{transform:none}}
@media (min-width:901px){.metro{margin-top:40px}}
/* Song picks card: same height as title + intro, content centred */
@media (min-width:861px){.way-head{align-items:stretch}.way-head .song-pair{display:flex;flex-direction:column;justify-content:center;box-sizing:border-box;margin-top:6px}.way-head h2{margin-top:0}}
/* Metronome floats above the WhatsApp / Chordy buttons, so nothing can clip it and it keeps time while you scroll */
.metro{position:fixed!important;top:auto!important;right:18px!important;left:auto!important;bottom:calc(150px + env(safe-area-inset-bottom,0px))!important;margin:0!important;z-index:75;width:320px;max-height:calc(100vh - 190px);overflow:auto}
body.ai-open .metro{display:none!important}
@media (max-width:520px){.metro{right:12px!important;left:12px!important;width:auto;max-width:none}}
.chip-games{background:var(--yellow);color:var(--black);border-color:var(--yellow);text-decoration:none;display:inline-flex;align-items:center}
.chip-games:hover{background:var(--cream);border-color:var(--cream)}
.menu-btn{align-items:center;justify-content:center}.menu-btn svg{display:block;flex:none;max-width:none;width:20px;height:20px}.menu-btn .mi-close{width:18px;height:18px}.menu-btn .mi-close{display:none}.menu-btn[aria-expanded="true"] .mi-open{display:none}.menu-btn[aria-expanded="true"] .mi-close{display:block}
/* Metronome v2: time signatures and tappable accents */
.mt-sig{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:10px;background:#efe6d3;border-radius:14px;padding:4px}
.mt-sig button{height:34px;border:0;border-radius:10px;background:transparent;font-family:var(--display);font-weight:600;font-size:16px;cursor:pointer;color:var(--black)}
.mt-sig button[aria-checked="true"]{background:var(--black);color:var(--yellow)}
.mt-beats{display:flex;justify-content:center;gap:8px;margin:14px 0 4px;flex-wrap:nowrap}
.mt-beats button{width:34px;height:34px;flex:0 0 34px;border-radius:50%;border:2px solid #cdbfa5;background:#fff;color:#7a7062;font-family:var(--display);font-weight:600;font-size:15px;cursor:pointer;padding:0;display:grid;place-items:center;transition:transform .08s,background .08s,box-shadow .08s,border-color .15s}
.mt-beats button.acc{border-color:var(--black);color:var(--black);border-width:3px;font-weight:700}
.mt-beats button.on{background:var(--yellow);border-color:var(--yellow);color:var(--black);transform:scale(1.18)}
.mt-beats button.acc.on{background:var(--yellow);border-color:var(--black);transform:scale(1.32);box-shadow:0 0 0 5px rgba(246,168,1,.35),0 0 18px rgba(246,168,1,.8)}
.mt-tip{text-align:center;font-size:12px;font-weight:700;color:#7a7062;margin:2px 0 12px}
/* Metronome shortcut in the header */
.nav-r{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.nav-r .btn{height:44px;padding-top:0;padding-bottom:0}
.nav-metro{width:46px;height:46px;flex:0 0 46px;border-radius:50%;border:0;background:rgba(251,246,236,.1);color:var(--cream);cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;text-decoration:none;transition:background .15s,color .15s}
.nav-metro:hover{background:rgba(246,168,1,.2);color:var(--yellow)}
.nav-metro svg{display:block;flex:none;max-width:none;width:22px;height:22px}
.nav-metro.on{background:var(--yellow);color:var(--black)}
.nav-metro.on .metro-arm{animation:tick .66s ease-in-out infinite alternate;transform-origin:12px 16px}
/* tempo you can type into */
.mt-bpm{display:block;text-align:center;cursor:text}
.mt-bpm input{display:block;width:3.2ch;margin:0 auto;padding:0 2px;border:0;border-bottom:3px dashed transparent;border-radius:0;background:transparent;color:var(--black);
font-family:var(--display);font-weight:700;font-size:44px;line-height:1;text-align:center;outline:none;-webkit-appearance:none;appearance:none;caret-color:var(--yellow-deep);transition:border-color .15s}
.mt-bpm:hover input{border-bottom-color:#d8ccb4}
.mt-bpm input:focus{border-bottom-color:var(--yellow)}
.mt-bpm input::selection{background:rgba(246,168,1,.45)}
/* tablets: the big round badge is skipped, so the piano comes up sooner */
@media (max-width:900px){.hero-badge{display:none}.hero-grid{gap:0}}
@media (max-width:900px){body:not(.solo) .hero{padding-top:118px}}
@media (max-width:620px){body:not(.solo) .hero{padding-top:104px}}
/* ---------- Phones: shorter page. Long card lists become swipe rows ---------- */
.sw-dots{display:none}
@media (max-width:620px){
.hero-badge{display:none}
.hero-grid{gap:0}
.kb-songs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-left:-24px;margin-right:-24px;padding-left:24px;padding-right:24px}
.kb-songs::-webkit-scrollbar{display:none}
.kb-songs>*{flex:0 0 auto}
.swipe{display:flex!important;grid-template-columns:none!important;flex-wrap:nowrap!important;justify-content:flex-start!important;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;gap:14px!important;
margin-left:-24px!important;margin-right:-24px!important;padding:8px 24px 16px!important;scroll-padding:0 24px;-webkit-overflow-scrolling:touch}
.swipe::-webkit-scrollbar{display:none}
.swipe>*{flex:0 0 84%!important;width:auto;min-width:0;scroll-snap-align:start;grid-column:auto!important;grid-row:auto!important;margin:0!important}
.swipe.metaphors>*{flex-basis:72%!important}
.sw-dots{display:flex;justify-content:center;gap:7px;margin-top:2px}
.sw-dots i{width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.22;transition:opacity .2s,width .2s}
.sw-dots i.on{opacity:.9;width:20px;border-radius:999px}
.pack{display:none}
.portrait{aspect-ratio:4/3;max-width:none}
.portrait img{object-position:center 25%}
}
/* ---------- Seasonal offer pop-up ---------- */
.offer-pop{position:fixed;left:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:72;width:min(360px,calc(100vw - 36px));background:var(--black);color:var(--cream);
border:3px solid var(--yellow);border-radius:24px;padding:22px 20px 18px;box-shadow:0 18px 40px rgba(0,0,0,.35);transform:translateY(calc(100% + 60px));opacity:0;
transition:transform .55s cubic-bezier(.34,1.3,.55,1),opacity .3s,bottom .3s}
.offer-pop.show{transform:none;opacity:1}
.offer-pop[hidden]{display:none}
.op-x{position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:50%;border:0;background:rgba(251,246,236,.12);color:var(--cream);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.op-x svg{display:block;flex:none;max-width:none}
.op-tag{display:inline-block;background:var(--yellow);color:var(--black);font-weight:800;font-size:13px;border-radius:999px;padding:5px 12px;transform:rotate(-2deg)}
.op-badge{font-family:var(--display);font-weight:700;font-size:46px;line-height:1;color:var(--yellow);margin-top:14px}
.op-badge:empty{display:none}
.op-h{font-family:var(--display);font-weight:600;font-size:22px;line-height:1.15;margin-top:6px;padding-right:8px}
.op-d{font-size:15px;color:#d8cfbd;margin-top:8px;line-height:1.45}
.op-d:empty{display:none}
.op-ends{font-size:13px;font-weight:800;color:var(--yellow);margin-top:10px}
.op-go{margin-top:16px;width:100%}
/* offer shown inside the booking form */
.offer-ribbon{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;background:var(--black);color:var(--cream);border-radius:14px;padding:10px 12px;margin-bottom:16px;font-weight:700;font-size:14px;line-height:1.3}
.offer-ribbon[hidden]{display:none}
.or-tag{background:var(--yellow);color:var(--black);border-radius:999px;padding:3px 10px;font-weight:800;font-size:12px}
.or-ok{margin-left:auto;color:var(--yellow);font-weight:800;font-size:13px}
/* ---------- Sticky "Book" bar on phones and tablets ---------- */
.cta-bar{display:none}
@media (max-width:900px){
.cta-bar{display:flex;position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:69;align-items:center;justify-content:space-between;gap:12px;
background:var(--black);color:var(--cream);border:2px solid var(--yellow);border-radius:999px;padding:7px 7px 7px 20px;box-shadow:0 12px 30px rgba(0,0,0,.35);
transform:translateY(calc(100% + 30px));transition:transform .4s cubic-bezier(.34,1.3,.55,1)}
body.bar-on .cta-bar{transform:none}
.cb-txt{min-width:0;line-height:1.2}
.cb-txt b{display:block;font-family:var(--display);font-weight:600;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cb-txt small{display:block;font-size:12px;font-weight:700;color:#bfb6a4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cta-bar .btn{flex:0 0 auto;height:44px;padding:0 22px;font-size:16px;box-shadow:none}
.wa-fab,.ai-fab,.offer-pop{transition:bottom .35s cubic-bezier(.34,1.3,.55,1),transform .25s,width .3s,opacity .3s}
body.bar-on .wa-fab{bottom:calc(152px + env(safe-area-inset-bottom,0px))}
body.bar-on .ai-fab{bottom:calc(88px + env(safe-area-inset-bottom,0px))}
body.bar-on .offer-pop{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
body.bar-on .metro{bottom:calc(220px + env(safe-area-inset-bottom,0px))!important}
body.ai-open .cta-bar{transform:translateY(calc(100% + 30px))}
}
@media (max-width:620px){.offer-pop{left:12px;right:12px;width:auto}}
/* ---------- Tuner + Listen ---------- */
#metroBtn{display:none!important}
.listen-btn{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.listen-btn .ls-ic{width:18px;height:18px;flex:0 0 18px;max-width:none}
.listen-btn.on{background:var(--yellow);color:var(--black);border-color:var(--yellow)}
.listen-btn.on .ls-ic{animation:lsPulse 1s ease-in-out infinite alternate}
@keyframes lsPulse{to{transform:scale(1.18)}}
.kw.heard{background:#ffe08a;color:var(--black)}
.kb-black.heard{background:var(--yellow);box-shadow:inset 0 -3px 0 #a86f00}
.tuner .tn-read{text-align:center;margin:18px 0 4px}
.tn-note{font-family:var(--display);font-weight:700;font-size:58px;line-height:1;color:var(--black);min-height:58px}
.tn-note sub{font-size:22px;vertical-align:baseline;margin-left:2px;color:#7a7062;bottom:0}
.tn-hz{font-size:12px;font-weight:700;color:#7a7062;margin-top:6px;min-height:16px}
.tn-meter{position:relative;height:30px;margin:12px 2px 0;border-radius:999px;background:#efe6d3;overflow:hidden}
.tn-zone{position:absolute;top:0;bottom:0;left:45%;width:10%;background:rgba(31,157,85,.25)}
.tn-mid{position:absolute;top:0;bottom:0;left:50%;width:2px;margin-left:-1px;background:#1f9d55}
.tn-needle{position:absolute;top:4px;bottom:4px;left:50%;width:8px;margin-left:-4px;border-radius:4px;background:#b8ab92;transition:left .12s ease-out,background .15s}
.tn-needle.live{background:var(--black)}
.tn-needle.ok{background:#1f9d55}
.tn-say{text-align:center;font-weight:800;font-size:15px;margin-top:8px;min-height:22px;color:var(--black)}
.tn-say.ok{color:#1f9d55}
.tn-strings{display:flex;justify-content:center;gap:6px;margin-top:12px}
.tn-strings button{width:36px;height:36px;flex:0 0 36px;border-radius:50%;border:2px solid #cdbfa5;background:#fff;font-family:var(--display);font-weight:600;font-size:15px;color:var(--black);cursor:pointer;padding:0;display:grid;place-items:center;transition:background .15s,border-color .15s}
.tn-strings button.near{border-color:var(--black);border-width:3px}
.tn-strings button.ok{background:#1f9d55;border-color:#1f9d55;color:#fff}
@media (max-width:360px){.nav-r{gap:6px}.nav-metro,.menu-btn{width:42px!important;height:42px!important;flex-basis:42px!important}}
@media (max-width:380px){.nav .brand{width:46px}.nav .brand .wordmark{opacity:0;transform:translateY(-50%) scale(.55)}.nav .brand .logo-round{opacity:1;transform:none}}
/* Chordy on phones: a centred sheet, smaller type, the page behind stays put */
.ai-log{overscroll-behavior:contain}
@media (max-width:620px){
.ai-panel{left:10px;right:10px;width:auto;bottom:calc(10px + env(safe-area-inset-bottom,0px));height:min(640px,calc(100vh - 96px));height:min(640px,calc(100dvh - 96px));border-radius:24px}
.ai-head{padding:10px 12px 10px 14px;gap:10px}
.ai-head .logo-round{width:34px;height:34px;flex:0 0 34px}
.ai-head b{font-size:17px}
.ai-head small{font-size:12px}
.ai-x{width:36px;height:36px;flex-basis:36px}
.ai-log{padding:12px;gap:8px}
.msg{max-width:92%;font-size:14.5px;line-height:1.45;padding:9px 13px;border-radius:18px}
.msg p+p,.msg ul{margin-top:6px}
.ai-acts{gap:6px;margin-top:8px}
.ai-act{min-height:38px;padding:6px 12px;font-size:14px}
.ai-sugs .chip{font-size:12.5px;padding:7px 12px}
.ai-input{padding:8px 10px;gap:6px}
.ai-input input{padding:10px 14px}
.ai-input .btn{padding:10px 16px}
.ai-foot{padding:0 10px 8px;font-size:10.5px}
html.hx-ai-open,body.ai-open{overflow:hidden}
}
/* ---------- Phones: compact shop cards and one tidy row of floating buttons ---------- */
@media (max-width:620px){
.shop.swipe{align-items:flex-start}
.shop .prod,.shop .sheets{padding:20px;gap:10px;border-radius:20px}
.shop .prod h3{font-size:22px}
.shop .prod.hero-prod h3{font-size:26px}
.shop .prod .desc,.shop .prod ul.inc{font-size:15px;line-height:1.45}
.shop .prod ul.inc{gap:6px;margin:0}
.shop .prod ul.inc li::before{flex-basis:14px;height:14px;margin-top:4px;box-shadow:inset 0 0 0 4px var(--black)}
.shop .price{font-size:32px}
.shop .sheets-top{margin-bottom:12px}
.shop .sheets h3{font-size:22px}
.shop .sheets-top p{font-size:15px;line-height:1.45}
.shop .sheet-list{gap:8px}
.shop .sheet-item{padding:9px 12px;border-radius:12px}
.shop .sheet-item b{font-size:15px}
.shop .sheet-item small{font-size:12px}
.shop .sheet-item .btn{padding:7px 12px;font-size:13px}
}
@media (max-width:900px){
.ai-fab,.wa-fab{width:50px;height:50px;min-width:0;padding:0;justify-content:center;transform:none!important;animation:none}
.ai-fab{right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));font-size:0;gap:0}
.ai-fab>span{font-size:24px;line-height:1}
.wa-fab{right:72px;bottom:calc(12px + env(safe-area-inset-bottom,0px))}
.wa-fab .wa-label{display:none}
.wa-fab svg{width:32px;height:32px;flex-basis:32px}
.wa-fab:hover,.wa-fab:focus-visible{width:50px}
.cta-bar{padding:5px 5px 5px 18px}
.cta-bar .btn{height:40px;padding:0 20px;font-size:15px}
.cb-txt b{font-size:15px}
.cb-txt small{font-size:11.5px}
body.bar-on .ai-fab,body.bar-on .wa-fab{bottom:calc(76px + env(safe-area-inset-bottom,0px))}
body.bar-on .offer-pop{bottom:calc(76px + env(safe-area-inset-bottom,0px))}
body.bar-on .metro{bottom:calc(140px + env(safe-area-inset-bottom,0px))!important}
.ai-hint{right:0;left:auto;top:auto;bottom:calc(100% + 12px);transform:translateY(8px) rotate(-2deg);transform-origin:right bottom}
.ai-fab.hello .ai-hint{transform:rotate(-2deg)}
.ai-hint::after{right:18px;top:auto;bottom:-8px;transform:rotate(135deg)}
}
/* ---------- Phones: scrolled header shows where you are ---------- */
.nav-sec{display:none}
@media (max-width:900px){
.nav-sec{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;flex:1 1 auto;min-width:0;margin-left:-6px;height:46px;line-height:1;opacity:0;transform:translateX(-8px);pointer-events:none;
transition:opacity .3s ease .1s,transform .45s cubic-bezier(.2,.8,.2,1) .1s}
.nav.scrolled .nav-sec{opacity:1;transform:none}
.nav.menu-open .nav-sec{opacity:0}
.nav-sec b{position:relative;top:-1px;max-width:100%;font-family:var(--display);font-weight:600;font-size:18px;color:var(--yellow);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity .2s,transform .3s}
.nav-sec b.swap{opacity:0;transform:translateY(5px)}
}
@media (max-width:360px){.nav-sec{display:none}}
/* Level tiles: centre everything (iPhone Safari does not stretch button contents) */
.step{align-items:center}
.step .num,.step .nm{align-self:stretch;width:100%;text-align:center;display:flex;flex-direction:column;align-items:center}
.step .nm .lk{display:block}
@media (max-width:620px){.stairs{align-items:stretch}}
.kw.root::after,.kb-black.root::after{content:"";position:absolute;left:50%;width:8px;height:8px;border-radius:50%;background:var(--yellow);transform:translateX(-50%);box-shadow:0 0 0 2px var(--black)}
.kw.root::after{bottom:40px}
.kb-black.root::after{bottom:10px}
.kw.root.on::after{background:var(--black);box-shadow:0 0 0 2px var(--yellow)}
/* ---------- Keyboard tools: root, pad, chords (tidy) ---------- */
.kb-tools{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:18px}
.root-sel,.pad-btn,.kb-chords,.pad-opts .pad-styles,.pad-volbox{height:44px;background:#262420;border:1px solid #3a3630;border-radius:999px;box-sizing:border-box}
.root-sel{display:inline-flex;align-items:center;justify-content:space-between;padding:0 4px 0 16px;color:var(--cream)}
.rs-l{font-weight:800;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#bfb6a4;margin-right:6px}
.rs-b{width:34px;height:34px;flex:0 0 34px;border-radius:50%;border:0;background:transparent;color:var(--cream);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.rs-b svg{display:block;flex:none;max-width:none}
.rs-b:hover{background:#3a3630}
#rootName{min-width:40px;height:34px;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:700;font-size:20px;color:var(--black);background:var(--yellow);border-radius:999px;padding:0 8px}
.pad-btn{display:inline-flex;align-items:center;gap:9px;color:var(--cream);font-family:var(--body);font-weight:800;font-size:15px;padding:0 18px 0 16px;cursor:pointer}
.pad-btn[aria-pressed="true"]{background:var(--yellow);border-color:var(--yellow);color:var(--black)}
.pad-wave{display:inline-flex;align-items:center;gap:2px;height:16px}
.pad-wave i{width:3px;height:6px;border-radius:2px;background:currentColor;opacity:.8}
.pad-btn[aria-pressed="true"] .pad-wave i{animation:padwave 1.6s ease-in-out infinite}
.pad-wave i:nth-child(2){animation-delay:.2s!important}.pad-wave i:nth-child(3){animation-delay:.4s!important}.pad-wave i:nth-child(4){animation-delay:.6s!important}
@keyframes padwave{0%,100%{height:5px}50%{height:15px}}
.kb-chords{display:inline-flex;align-items:center;gap:2px;padding:4px}
.kc{height:34px;min-width:42px;border:0;border-radius:999px;background:transparent;color:var(--cream);font-family:var(--display);font-weight:600;font-size:16px;padding:0 12px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:0;white-space:nowrap}
.kc:hover{background:#3a3630}
.kc:active{background:var(--yellow);color:var(--black)}
.kc-loop{gap:6px;color:#bfb6a4;font-family:var(--body);font-weight:800;font-size:13px}
.kc-loop svg{display:block;flex:none;max-width:none}
.kc em{font-style:normal}.kl-m{display:none}
.pad-opts{display:flex;flex-wrap:wrap;align-items:center;gap:10px;flex-basis:100%}
.pad-opts[hidden]{display:none}
.pad-opts .pad-styles{display:inline-flex;align-items:center;gap:2px;padding:4px}
.pad-styles button{height:34px;border:0;border-radius:999px;background:transparent;color:#bfb6a4;font-family:var(--body);font-weight:800;font-size:13px;padding:0 13px;cursor:pointer}
.pad-styles button[aria-checked="true"]{background:#3a3630;color:var(--cream)}
.pad-volbox{display:inline-flex;align-items:center;gap:10px;padding:0 18px 0 16px;color:#bfb6a4}
.pad-vol{position:relative;width:110px;height:34px;flex:0 0 auto;cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none;--v:40%}
.pad-vol::before{content:"";position:absolute;left:0;right:0;top:50%;height:6px;margin-top:-3px;border-radius:3px;background:#4a453d}
.pv-fill{position:absolute;left:0;top:50%;height:6px;margin-top:-3px;width:var(--v);border-radius:3px;background:var(--yellow)}
.pv-thumb{position:absolute;top:50%;left:var(--v);width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;background:var(--yellow);box-shadow:0 0 0 3px #262420}
.pad-vol:focus-visible{outline:2px solid var(--yellow);outline-offset:4px;border-radius:8px}
.pad-volbox svg{display:block;flex:none;max-width:none;cursor:pointer}
.kb-games{display:inline-flex;align-items:center;gap:6px;margin:16px 0 28px;color:#bfb6a4;font-weight:800;font-size:14px;text-decoration:none}
.kb-games:hover{color:var(--yellow)}
@media (max-width:620px){
.kb-tools{gap:8px}
.root-sel{flex:1 1 auto}
.pad-opts{order:2;gap:8px}
.kb-chords{order:3;flex:1 1 100%;justify-content:space-between}
.kc{padding:0 8px;font-size:15px;min-width:0}
.kl-d{display:none}.kl-m{display:inline}
.pad-opts .pad-styles{flex:1 1 100%;justify-content:space-between}
.pad-volbox{flex:1 1 100%}
.pad-vol{flex:1 1 auto;width:auto;min-width:60px;margin:0 6px}
.kb-games{margin:14px 0 24px}
/* chord name with MIDI and Listen as round buttons, one row */
.kb-side{display:grid!important;grid-template-columns:minmax(0,1fr) auto auto!important;align-items:center;gap:8px!important;width:100%}
.kb-side .chord-pill{grid-column:1!important;grid-row:1!important;width:auto!important;min-width:0}
.kb-side .chord-pill{gap:10px;padding:5px 14px 5px 5px;min-width:0}
.kb-side .chord-pill b{font-size:18px}
.kb-side .chord-pill small{font-size:12px}
.kb-side .chord-emo{width:40px;height:40px;flex:0 0 40px;font-size:20px}
.kb-side .midi-btn,.kb-side .listen-btn{grid-row:1!important;width:50px;height:50px;padding:0!important;justify-content:center;border-radius:50%;gap:0;order:0}
.kb-side .midi-btn{grid-column:2!important;flex-direction:column;gap:3px}
.kb-side .listen-btn{grid-column:3!important}
#midiLabel{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.kb-side .midi-btn::after{content:"MIDI";font-size:10px;font-weight:900;letter-spacing:.06em;line-height:1}
.kb-side .listen-btn #listenLabel{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.kb-side .listen-btn .ls-ic{width:22px;height:22px;flex-basis:22px}
}
/* root picker: a one-octave mini keyboard */
.root-sel{position:relative}
#rootName{border:0;cursor:pointer;font-family:var(--display)}
#rootName:hover,#rootName[aria-expanded="true"]{box-shadow:0 0 0 3px rgba(246,168,1,.35)}
.root-pick{position:absolute;left:-1px;bottom:calc(100% + 12px);z-index:30;width:300px;box-sizing:border-box;background:var(--cream);color:var(--black);border:2px solid var(--black);border-radius:20px;padding:14px 14px 16px;
box-shadow:0 18px 40px rgba(0,0,0,.45),5px 5px 0 var(--yellow);transform-origin:20% 100%;animation:rpIn .22s cubic-bezier(.34,1.4,.55,1)}
.root-pick[hidden]{display:none}
@keyframes rpIn{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}
.root-pick::after{content:"";position:absolute;left:var(--rp-arrow,128px);bottom:-9px;width:14px;height:14px;background:var(--cream);border-right:2px solid var(--black);border-bottom:2px solid var(--black);transform:rotate(45deg)}
.rp-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:12px}
.rp-head b{font-family:var(--display);font-weight:600;font-size:18px}
.rp-head span{font-weight:800;font-size:12px;color:#6b6255}
.rp-kb{position:relative;height:118px;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));width:100%;box-sizing:border-box}
.rp-w,.rp-b{-webkit-appearance:none;appearance:none;margin:0;min-width:0;box-sizing:border-box;line-height:1;-webkit-tap-highlight-color:transparent}
.rp-w{width:100%;height:100%;padding:0 0 8px;border:2px solid var(--black);border-left-width:0;background:#fff;display:flex;align-items:flex-end;justify-content:center;
font-family:var(--display);font-weight:600;font-size:16px;color:var(--black);cursor:pointer;border-radius:0 0 8px 8px;transition:background .12s}
.rp-w:first-child{border-left-width:2px}
.rp-b{position:absolute;top:0;width:calc(100% / 7 * .62);height:62%;transform:translateX(-50%);background:var(--black);color:var(--cream);border:0;border-radius:0 0 6px 6px;z-index:2;
display:flex;align-items:flex-end;justify-content:center;padding:0 0 6px;font-family:var(--display);font-weight:600;font-size:11px;cursor:pointer;transition:background .12s}
.rp-w:hover{background:#fdf0cf}.rp-b:hover{background:#3a3630}
.rp-w[aria-checked="true"],.rp-b[aria-checked="true"]{background:var(--yellow);color:var(--black)}
.rp-w:focus-visible,.rp-b:focus-visible{outline:3px solid var(--yellow);outline-offset:-3px}
@media (max-width:360px){.root-pick{width:calc(100vw - 32px)}}
/* chord pill: name only, no Ask button */
#askChord{display:none!important}
/* piano mute */
.pn-btn{display:inline-flex;align-items:center;gap:8px;height:44px;box-sizing:border-box;background:#262420;border:1px solid #3a3630;border-radius:999px;color:var(--cream);font-family:var(--body);font-weight:800;font-size:15px;padding:0 18px 0 14px;cursor:pointer}
.pn-btn svg{display:block;flex:none;max-width:none}
.pn-btn .pn-off{display:none}
@media (max-width:620px){.pl-in{display:none}.root-sel{min-width:0;flex:1 1 0}}
.pn-btn[aria-pressed="true"]{color:#bfb6a4;border-style:dashed}
.pn-btn[aria-pressed="true"] .pn-on{display:none}.pn-btn[aria-pressed="true"] .pn-off{display:block;color:var(--yellow)}
@media (max-width:620px){.pn-btn{width:44px;padding:0;justify-content:center}.pn-btn #pianoLabel{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}}
/* Note Houses on/off */
.kids-tg{display:inline-flex;align-items:center;gap:8px;margin-top:10px;background:none;border:0;padding:0;color:#bfb6a4;font-family:var(--body);font-weight:800;font-size:14px;cursor:pointer}
.kids-tg .sw{position:relative;width:38px;height:22px;border-radius:999px;background:#3a3630;transition:background .2s;flex:0 0 38px}
.kids-tg .sw::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:var(--cream);transition:transform .2s}
.kids-tg[aria-checked="true"] .sw{background:var(--yellow)}
.kids-tg[aria-checked="true"] .sw::after{transform:translateX(16px);background:var(--black)}
body.kids-off .kb-house{display:none}
body.kids-off .kb-scroll{padding-top:6px}
/* metronome volume */
.mt-vol{display:flex;align-items:center;gap:10px;margin:12px 0 4px;color:var(--black);font-weight:800;font-size:13px}
.mc-card{position:fixed;z-index:9000;box-sizing:border-box;padding:16px;border-radius:18px;background:linear-gradient(180deg,#24211c,#171512);border:1px solid #3a3630;border-top:3px solid var(--kl,#F6A801);box-shadow:0 24px 54px rgba(0,0,0,.65);color:#FBF6EC;font:600 13px/1.4 Nunito,system-ui,sans-serif;display:flex;flex-direction:column;gap:12px;max-height:calc(100vh - 24px);overflow:auto;animation:cwIn .22s cubic-bezier(.2,.9,.3,1)}
.mc-card[hidden]{display:none!important}
.mc-h{display:flex;justify-content:space-between;align-items:center}.mc-h b{font:800 11px/1 Nunito,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#a99f8e}
.mc-x{width:32px;height:32px;border-radius:50%;border:1px solid #3a3630;background:#1d1b18;color:#cfc6b4;font:400 20px/1 sans-serif;cursor:pointer}
.mc-hero{display:flex;align-items:center;gap:14px}
.mc-met{flex:none;width:96px;height:128px;filter:drop-shadow(0 8px 10px rgba(0,0,0,.5))}
.mc-ticks line{stroke:#6d5a3a;stroke-width:1.2}
.mc-rod{transform-origin:60px 132px;transform-box:view-box}
.mc-card.run .mc-wt{filter:drop-shadow(0 0 4px rgba(246,168,1,.8))}
.mc-read{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.mc-bpm{align-self:flex-start;display:inline-flex;align-items:baseline;gap:8px;padding:4px 14px;border-radius:10px;border:0;cursor:ns-resize;touch-action:none;background:radial-gradient(130% 150% at 50% 0,#3a2805 0,#1f1503 75%);box-shadow:inset 0 0 0 1px #5a400a,inset 0 0 14px rgba(0,0,0,.6);color:#ffc23d;text-shadow:0 0 2px #ffb000,0 0 12px rgba(255,190,40,.55)}
.mc-bpm b{font:400 54px/1 'VT323',monospace;min-width:2.1ch;text-align:right}.mc-bpm small{font:400 16px/1 'VT323',monospace;letter-spacing:.08em;color:#e0a520}
.mc-name{font:700 15px/1 Fredoka,var(--display),sans-serif;color:#cfc6b4;letter-spacing:.02em}
.mc-leds{display:flex;gap:6px;flex-wrap:wrap}
.mc-leds button{width:30px;height:30px;padding:0;border-radius:50%;border:1px solid #3a3630;background:#1b1916;color:#8a8273;font:900 12px/1 Nunito,sans-serif;cursor:pointer;transition:background .06s,box-shadow .06s}
.mc-leds button.acc{border-color:#8a6512;color:#F6A801}
.mc-leds button.lit{background:#F6A801;color:#111;box-shadow:0 0 12px rgba(246,168,1,.8)}
.mc-leds button.acc.lit{background:#ffd36b;box-shadow:0 0 16px rgba(255,211,107,.95)}
.mc-tip{font-size:11.5px;color:#8a8273}
.mc-tempo{display:flex;align-items:center;gap:8px}
.mc-pm{flex:none;width:34px;height:34px;border-radius:50%;border:1px solid #3a3630;background:#1d1b18;color:#FBF6EC;font:800 18px/1 Nunito,sans-serif;cursor:pointer}
.mc-rule{flex:1;min-width:0;-webkit-appearance:none;appearance:none;height:26px;background:transparent;cursor:pointer;--p:31%}
.mc-rule::-webkit-slider-runnable-track{height:26px;border-radius:6px;background:repeating-linear-gradient(90deg,#4a443b 0 1px,transparent 1px 6.25%) 0 100%/100% 10px no-repeat,linear-gradient(90deg,rgba(246,168,1,.35) var(--p),#1b1916 var(--p));border:1px solid #3a3630}
.mc-rule::-moz-range-track{height:26px;border-radius:6px;background:linear-gradient(90deg,rgba(246,168,1,.35) var(--p),#1b1916 var(--p));border:1px solid #3a3630}
.mc-rule::-webkit-slider-thumb{-webkit-appearance:none;width:6px;height:30px;margin-top:-3px;border-radius:3px;background:#F6A801;box-shadow:0 0 8px rgba(246,168,1,.8)}
.mc-rule::-moz-range-thumb{width:6px;height:30px;border:0;border-radius:3px;background:#F6A801;box-shadow:0 0 8px rgba(246,168,1,.8)}
.mc-tap{flex:none;height:34px;padding:0 14px;border-radius:999px;border:1px solid #5a400a;background:#2a1d04;color:#ffc23d;font:400 18px/1 'VT323',monospace;letter-spacing:.1em;cursor:pointer}
.mc-tap.hit{animation:kmeHit .3s ease-out}
.mc-row{display:flex;align-items:center;gap:10px}.mc-row[hidden]{display:none}
.mc-l{flex:0 0 58px;font:800 10.5px/1 Nunito,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#8a8273}
.mc-chips{display:flex;flex-wrap:wrap;gap:5px;min-width:0}
.mc-chips button{height:30px;padding:0 12px;border-radius:999px;border:1px solid #3a3630;background:#1d1b18;color:#cfc6b4;font:800 12px/1 Nunito,sans-serif;cursor:pointer}
.mc-chips button[aria-checked="true"]{background:var(--kl,#F6A801);border-color:var(--kl,#F6A801);color:#111}
.mc-vol{flex:1;min-width:0}.mc-vol .mt-vol{margin:0;color:#cfc6b4}
.mc-rtip{margin:-2px 0 12px;font:600 11.5px/1.4 Nunito,sans-serif;color:#8a8170}
.mc-gtabs{display:flex;flex-wrap:wrap;gap:5px;flex-basis:100%}.mc-gt{display:inline-flex;align-items:center;gap:6px}.mc-gt i{font-style:normal;font-size:10px;opacity:.7;transition:transform .15s}
.mc-gt[aria-expanded="true"]{border-color:var(--kl,#F6A801)!important;color:#FBF6EC!important}.mc-gt[aria-expanded="true"] i{transform:rotate(180deg)}.mc-gt.on{box-shadow:inset 0 -2px 0 var(--kl,#F6A801)}
.mc-gp{display:flex;flex-wrap:wrap;gap:5px;flex-basis:100%;margin-top:4px;padding:8px;border-radius:12px;background:#141210;border:1px solid #2a2722}.mc-gp[hidden]{display:none}
.mc-card{cursor:grab;touch-action:none}.mc-card.mc-drag{cursor:grabbing;user-select:none}.mc-card button,.mc-card input{cursor:pointer}
.mc-gl{flex-basis:100%;font:800 10px/1 Nunito,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#6f685c;margin:4px 0 0}.mc-gl:first-child{margin-top:0}
.mc-vol .mt-vol{gap:12px}.mc-grv{align-items:flex-start}.mc-grv .mc-l{padding-top:4px}
.mc-go{display:flex;align-items:center;justify-content:center;gap:10px;height:46px;border-radius:12px;border:0;background:linear-gradient(180deg,#ffd36b,#F6A801 55%,#d99200);color:#111;font:800 16px/1 Nunito,sans-serif;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 6px 14px rgba(246,168,1,.25)}
.mc-go-i{width:0;height:0;border-left:13px solid #111;border-top:8px solid transparent;border-bottom:8px solid transparent}
.mc-card.run .mc-go{background:linear-gradient(180deg,#2c2924,#1b1916);color:#FBF6EC;box-shadow:inset 0 0 0 1px #F6A801,0 0 16px rgba(246,168,1,.35)}
.mc-card.run .mc-go-i{width:12px;height:12px;border:0;border-radius:2px;background:#F6A801}
.mc-card button:focus-visible,.mc-rule:focus-visible{outline:2px solid var(--kl,#F6A801);outline-offset:2px}
body.solo .mtk.mc-open{box-shadow:0 0 0 2px var(--kl,#F6A801)}
.mt-vol svg{display:block;flex:none;max-width:none}
.mt-vol .mt-v{flex:1;width:auto}
.mt-v::before{background:#e0d4ba!important}
.mt-v .pv-thumb{box-shadow:0 0 0 3px #fff,0 1px 3px rgba(0,0,0,.3)}
#mtVolN{min-width:38px;text-align:right}
/* switches + staff + number badge */
.kb-switches{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:10px}
.kb-switches .kids-tg{margin-top:0}
.kb-staff{flex:0 0 auto;align-self:flex-end;width:280px;max-width:100%;background:#1d1b18;border:1px solid #3a3630;border-radius:20px;padding:10px 14px;color:var(--cream);box-sizing:border-box}
.kb-staff svg{display:block;width:100%;height:auto}
.kb-staff{display:none}
body.staff-on .kb-staff{display:block}
.kb-side .chord-pill .nns b{font-size:26px;line-height:1}.kb-side .chord-pill .nns small{font-size:8.5px;line-height:1}
@media (max-width:620px){.kb-side .chord-pill .nns b{font-size:24px}.kb-side .chord-pill .nns small{font-size:8px}}
.nns{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:58px;height:42px;border-radius:21px;background:var(--black);color:var(--yellow);padding:0 12px;line-height:1}
.chord-pill:has(.nns:not([hidden])){padding-right:6px!important}
.nns[hidden]{display:none}
.nns b{font-family:var(--display);font-weight:700;font-size:26px;letter-spacing:-.5px;color:var(--yellow)!important;white-space:nowrap}
.nns sup{font-size:13px;margin-left:1px;vertical-align:11px}
.nns small{font-size:8.5px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:#9d9483!important;white-space:nowrap}
@media (max-width:700px){.kb-staff{align-self:stretch;width:100%}}
@media (max-width:620px){.nns{min-width:54px;height:40px;border-radius:20px}.chord-pill:has(.nns:not([hidden])){padding-right:5px!important}.nns b{font-size:24px}.nns sup{font-size:12px;vertical-align:10px}.nns small{font-size:8px}}
/* record what you play */
.rec-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:14px 0 28px}
.rec-row .kb-games{margin:0 0 0 auto}
.rec-btn{display:inline-flex;align-items:center;gap:9px;height:44px;box-sizing:border-box;background:#262420;border:1px solid #3a3630;border-radius:999px;color:var(--cream);font-family:var(--body);font-weight:800;font-size:15px;padding:0 18px 0 16px;cursor:pointer}
.rec-dot{width:12px;height:12px;border-radius:50%;background:#ff4d4d;box-shadow:0 0 0 3px rgba(255,77,77,.18)}
.rec-btn em{font-style:normal;font-variant-numeric:tabular-nums;color:#ffb3b3}
.rec-btn[aria-pressed="true"]{border-color:#ff4d4d;background:#2c1d1b}
.rec-btn[aria-pressed="true"] .rec-dot{border-radius:3px;animation:recPulse 1s ease-in-out infinite}
@keyframes recPulse{50%{opacity:.35}}
.rec-take{display:inline-flex;align-items:center;gap:4px;height:44px;box-sizing:border-box;background:#262420;border:1px solid #3a3630;border-radius:999px;padding:4px}
.rec-take[hidden]{display:none}
.rt-b{display:inline-flex;align-items:center;gap:7px;height:34px;border:0;border-radius:999px;background:transparent;color:var(--cream);font-family:var(--body);font-weight:800;font-size:14px;padding:0 13px;cursor:pointer;text-decoration:none}
.rt-b svg{display:block;flex:none;max-width:none}
.rt-b:hover{background:#3a3630}
.rt-dl{background:var(--yellow);color:var(--black)}.rt-dl:hover{background:var(--yellow)}
.rt-x{width:34px;padding:0;justify-content:center;color:#bfb6a4}
#recPlay .rp-pa{display:none}#recPlay.on .rp-pa{display:block}#recPlay.on .rp-pl{display:none}
#recLen{font-variant-numeric:tabular-nums}
@media (max-width:620px){.rec-row .kb-games{margin:4px 0 0;flex-basis:100%}}
/* free downloads strip on the home page */
.free-strip{display:flex;align-items:center;gap:16px;background:var(--card);border:2px solid var(--yellow);border-radius:22px;padding:14px 16px 14px 14px;margin-bottom:38px;text-decoration:none;color:var(--ink);box-shadow:0 6px 0 var(--yellow);transition:transform .15s,box-shadow .15s}
.free-strip:hover{transform:translateY(-2px);box-shadow:0 8px 0 var(--yellow)}
.fs-ic{width:52px;height:52px;flex:0 0 52px;border-radius:50%;background:var(--yellow);display:grid;place-items:center;font-size:26px}
.fs-tx{flex:1;min-width:0}.fs-tx b{display:block;font-family:var(--display);font-weight:600;font-size:20px;line-height:1.2}.fs-tx small{display:block;color:var(--muted);font-weight:700;font-size:14px;margin-top:2px}
.fs-go{flex:0 0 auto;background:var(--black);color:var(--yellow);font-family:var(--display);font-weight:600;font-size:16px;border-radius:999px;padding:11px 18px;white-space:nowrap}
@media (max-width:620px){.free-strip{flex-wrap:wrap;gap:12px}.fs-ic{width:44px;height:44px;flex-basis:44px;font-size:22px}.fs-tx b{font-size:17px}.fs-tx small{font-size:13px}.fs-go{flex-basis:100%;text-align:center}}
.kb-links{display:inline-flex;gap:18px;margin-left:auto}
.kb-pop.pc-a,.kb-pop.pc-b,.kb-pop.pc-c,.kb-pop.pc-d,.kb-pop.pc-e{height:30px;box-sizing:border-box;padding:0 12px;gap:7px;font-size:13.5px;line-height:1;white-space:nowrap}
.kb-pop .pc-b{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:999px;background:var(--yellow);color:var(--black);font-size:10px;font-weight:900;letter-spacing:.14em}
.kb-pop .pc-l{display:inline-flex;align-items:center;gap:6px}.kb-pop .pc-ar{opacity:.85}
.kb-pop .pc-short{display:none}
.kb-pop.pc-a,.kb-pop.pc-b,.kb-pop.pc-d{padding-left:5px;vertical-align:4px}
.kb-pop.pc-c{background:var(--yellow);border-color:var(--yellow);color:var(--black);padding-right:5px}
.kb-pop.pc-c .pc-b{background:var(--black);color:var(--yellow)}
.kb-pop.pc-c:hover{background:#ffb81f}
.kb-pop.pc-d{border-color:var(--yellow);color:var(--cream);box-shadow:0 0 14px rgba(246,168,1,.25)}
@media (max-width:900px){.kb-pop[id=premCta]{display:flex;width:fit-content;margin:8px 0 0;vertical-align:0}}
@media (max-width:1100px){.kb-pop.pc-d .pc-long{display:none}.kb-pop.pc-d .pc-short{display:inline}}
@media (max-width:620px){.kb-pop[id=premCta]{display:flex;width:fit-content;margin:8px 0 0;vertical-align:0}.kb-pop .pc-long{display:none}.kb-pop .pc-short{display:inline}.kb-pop.pc-a,.kb-pop.pc-b,.kb-pop.pc-c,.kb-pop.pc-d,.kb-pop.pc-e{height:28px;font-size:12.5px}}
.kb-pop{display:inline-flex;align-items:center;gap:6px;margin-left:14px;vertical-align:3px;color:var(--yellow);font-weight:800;font-size:13px;text-decoration:none;border:1px solid rgba(246,168,1,.4);border-radius:999px;padding:4px 11px}
.kb-pop svg{display:block}.kb-pop:hover{background:rgba(246,168,1,.12)}
body.solo .kb-pop{display:none}
@media (max-width:620px){.kb-pop{margin-left:10px;font-size:12px;padding:3px 9px}}
.rec-row .kb-links .kb-games{margin:0;flex-basis:auto}
@media (max-width:620px){.kb-links{margin:4px 0 0;flex-basis:100%}}
/* record: compact red icon (v2) */
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.rec-row{flex-wrap:nowrap;gap:10px;margin:14px 0 28px}
.rec-btn{width:44px;height:44px;padding:0;gap:0;justify-content:center;flex:0 0 auto;transition:width .2s,background .15s,border-color .15s}
.rec-btn:hover{border-color:#ff4d4d}
.rec-dot{width:16px;height:16px;flex:0 0 16px;box-shadow:0 0 0 4px rgba(255,77,77,.16)}
.rec-btn em:empty{display:none}
/* the running time sits apart from Stop: a small gap and a thin divider */
html body .rec-btn em:not(:empty){margin-left:8px!important;padding-left:8px!important;border-left:1px solid rgba(255,179,179,.35)}
.rec-btn{position:relative;flex-direction:column}
.rec-btn[aria-pressed="true"]{gap:3px;border-color:#ff4d4d;background:#2c1d1b;animation:recRing 1.4s ease-out infinite}
.rec-btn[aria-pressed="true"] .rec-dot{width:9px;height:9px;flex:0 0 9px;border-radius:2px;box-shadow:none;animation:none}
.rec-btn em{font-size:11px;font-weight:900;line-height:1;color:#ffb3b3}
@keyframes recRing{0%{box-shadow:0 0 0 0 rgba(255,77,77,.45)}100%{box-shadow:0 0 0 9px rgba(255,77,77,0)}}
.rec-row .kb-links{display:inline-flex;align-items:center;gap:18px;margin:0 0 0 auto;flex:0 1 auto;min-width:0}
.rec-row .kb-links .kb-games{margin:0;white-space:nowrap;line-height:1}
@media (max-width:620px){
.rec-row{flex-wrap:wrap;row-gap:12px}
.rec-row .kb-links{margin:0 0 0 auto;flex:0 1 auto;gap:16px}
.rec-row .kb-links .kb-games{flex-basis:auto;font-size:15px}
.rec-take:not([hidden])~.kb-links{flex-basis:100%;justify-content:flex-start;margin-left:0}
}
/* number badge: big, centred, steady width (v3) */
.nns,.kb-side .chord-pill .nns{width:auto;min-width:76px;height:42px;border-radius:21px;padding:0 12px;gap:2px;box-sizing:border-box;align-items:center;justify-content:center;text-align:center}
.nns b,.kb-side .chord-pill .nns b{display:block;font-size:26px;line-height:1;letter-spacing:-.3px;text-align:center}
.nns sup{font-size:13px;vertical-align:11px;margin-left:1px;letter-spacing:0}
.nns small,.kb-side .chord-pill .nns small{display:block;font-size:8.5px;line-height:1;letter-spacing:.1em;text-align:center}
@media (max-width:620px){
.nns,.kb-side .chord-pill .nns{min-width:72px;height:40px;border-radius:20px;padding:0 11px}
.nns b,.kb-side .chord-pill .nns b{font-size:24px}
.nns sup{font-size:12px;vertical-align:10px}
.nns small,.kb-side .chord-pill .nns small{font-size:8px}
}
/* record lives in the tools row (v3) */
.kb-tools{margin-bottom:28px;row-gap:14px}
.kb-tools .kb-links{display:inline-flex;align-items:center;gap:18px;margin:0 0 0 auto;flex:0 0 auto}
.kb-tools .kb-links .kb-games{margin:0;white-space:nowrap;line-height:1}
@media (max-width:620px){
.kb-tools .rec-btn,.kb-tools .rec-take,.kb-tools .kb-links{order:4}
.kb-tools .rec-btn{margin-top:2px}
.kb-tools .kb-links{gap:16px}
.kb-tools .kb-links .kb-games{font-size:15px}
.kb-tools .rec-take:not([hidden])~.kb-links{flex-basis:100%;justify-content:flex-start;margin-left:0}
}
/* keyboard size selector (36 default, 49, 61, 76, 88) */
.kb-switches{align-items:center}
.kb-size{display:inline-flex;align-items:center;gap:8px;color:#bfb6a4;font-family:var(--body);font-weight:800;font-size:14px}
.ks-l{display:inline-flex;align-items:center;gap:8px}
.ks-seg{display:inline-flex;align-items:center;gap:2px;height:28px;padding:2px;box-sizing:border-box;background:#262420;border:1px solid #3a3630;border-radius:999px}
.ks-seg button{height:22px;min-width:32px;padding:0 7px;border:0;border-radius:999px;background:transparent;color:#bfb6a4;font-family:var(--body);font-weight:800;font-size:12.5px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;-webkit-appearance:none;appearance:none}
.ks-seg button:hover{color:var(--cream)}
.ks-seg button[aria-checked="true"]{background:var(--yellow);color:var(--black)}
.kb.many .kw{font-size:11px;padding-bottom:8px;border-radius:0 0 7px 7px;border-width:1.5px}
.kb.many .kb-black{border-radius:0 0 5px 5px;box-shadow:inset 0 -5px 0 #2b2b2b}
.kb.many .kw.root::after{bottom:30px;width:6px;height:6px}
.kb.many .kf i{font-size:20px}.kb.many .kf em{display:none}
.kb.many .kb-house{font-size:12px}
/* sustain light: on when the MIDI pedal is down (or tapped on) */
.sus-ind{display:inline-flex;align-items:center;gap:8px;height:28px;padding:0 12px 0 9px;box-sizing:border-box;background:transparent;border:1px solid #3a3630;border-radius:999px;color:#bfb6a4;font-family:var(--body);font-weight:800;font-size:14px;cursor:pointer;-webkit-appearance:none;appearance:none;transition:background .12s,border-color .12s,color .12s}
.sus-ring{width:12px;height:12px;flex:0 0 12px;border-radius:50%;border:2px solid currentColor;box-sizing:border-box;transition:background .12s,box-shadow .12s,border-color .12s}
.sus-ind:hover{border-color:#5a544a;color:var(--cream)}
.sus-ind[aria-pressed="true"]{background:var(--yellow);border-color:var(--yellow);color:var(--black)}
.sus-ind[aria-pressed="true"] .sus-ring{background:var(--black);border-color:var(--black);box-shadow:0 0 0 3px rgba(17,17,17,.18)}
@media (max-width:620px){.kb-switches{column-gap:14px}.ks-seg button{min-width:28px;padding:0 5px}.sus-ind{padding:0 10px 0 8px;gap:6px}}
/* chord pill: fixed size on tablets and laptops so it never grows or shrinks while you play */
@media (min-width:621px){
.kb-hint .kb-side{width:300px!important;flex:0 0 300px;display:grid!important;grid-template-columns:1fr 1fr!important;justify-content:stretch!important;box-sizing:border-box}
.kb-hint .kb-side .midi-btn,.kb-hint .kb-side .listen-btn{width:100%;min-width:0;justify-content:center;box-sizing:border-box}
.kb-hint .kb-side .chord-pill{grid-column:1/-1!important;justify-self:stretch!important;width:100%!important;min-width:0!important;flex:none!important;box-sizing:border-box}
}
/* scale practice */
.sc-tg span{font-size:13px;line-height:1}
.sc-tg.open{background:#3a3630;border-color:#5a544a;color:var(--cream)}
.sc-panel{flex-basis:100%;background:#1d1b18;border:1px solid #3a3630;border-radius:22px;padding:14px 16px 16px;box-sizing:border-box;color:var(--cream)}
.sc-panel[hidden]{display:none}
.sc-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.sc-head b{font-family:var(--display);font-weight:600;font-size:20px}
.sc-head span{color:#bfb6a4;font-weight:700;font-size:14px}
.sc-x{margin-left:auto;width:32px;height:32px;flex:0 0 32px;border-radius:50%;border:0;background:#262420;color:#bfb6a4;display:grid;place-items:center;cursor:pointer;padding:0}
.sc-x svg{display:block}.sc-x:hover{color:var(--cream);background:#3a3630}
.sc-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.sc-row+.sc-row{margin-top:12px}
.sc-sel select{height:40px;border-radius:999px;border:1px solid #3a3630;background:#262420 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 8l5 5 5-5' fill='none' stroke='%23bfb6a4' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center/14px;color:var(--cream);font-family:var(--body);font-weight:800;font-size:14px;padding:0 36px 0 16px;-webkit-appearance:none;appearance:none;cursor:pointer}
.sc-seg{display:inline-flex;align-items:center;gap:2px;height:40px;padding:4px;box-sizing:border-box;background:#262420;border:1px solid #3a3630;border-radius:999px}
.sc-l{color:#bfb6a4;font-weight:800;font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:0 8px 0 10px}
.sc-seg button{height:30px;min-width:34px;padding:0 9px;border:0;border-radius:999px;background:transparent;color:#bfb6a4;font-family:var(--body);font-weight:800;font-size:13px;cursor:pointer;-webkit-appearance:none;appearance:none}
.sc-seg button[aria-checked="true"]{background:var(--yellow);color:var(--black)}
.sc-btn{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 18px;border-radius:999px;border:1px solid #3a3630;background:#262420;color:var(--cream);font-family:var(--body);font-weight:800;font-size:15px;cursor:pointer;box-sizing:border-box}
.sc-btn svg{display:block;flex:none}
.sc-btn .i-stop,.sc-btn.on .i-play{display:none}.sc-btn.on .i-stop{display:block}
.sc-btn.sc-main{background:var(--yellow);border-color:var(--yellow);color:var(--black)}
.sc-btn.on{background:#2c1d1b;border-color:#ff4d4d;color:#ffb3b3}
.sc-prog{flex:1 1 120px;min-width:80px;height:8px;border-radius:4px;background:#3a3630;overflow:hidden}
.sc-prog i{display:block;height:100%;width:0;background:var(--yellow);border-radius:4px;transition:width .15s}
.sc-msg{flex-basis:100%;color:#bfb6a4;font-weight:700;font-size:14px;min-height:20px}
.fing{position:absolute;left:50%;transform:translateX(-50%);bottom:56px;width:24px;height:24px;border-radius:50%;background:var(--black);color:var(--yellow);font-family:var(--display);font-weight:700;font-size:14px;line-height:24px;text-align:center;pointer-events:none;z-index:3;box-shadow:0 0 0 2px var(--yellow)}
.kb-black .fing{bottom:14px;background:var(--yellow);color:var(--black);box-shadow:0 0 0 2px var(--black)}
.kb.many .fing{width:20px;height:20px;line-height:20px;font-size:12px;bottom:46px}.kb.many .kb-black .fing{bottom:10px}
.kw.sc-t,.kb-black.sc-t{animation:scGlow 1s ease-in-out infinite}
.kw.sc-t{background:#ffe7a8}
.kb-black.sc-t{background:#7a5600}
@keyframes scGlow{0%,100%{box-shadow:inset 0 0 0 3px var(--yellow)}50%{box-shadow:inset 0 0 0 6px var(--yellow)}}
.kw.sc-ok{background:#c9f2d6}.kb-black.sc-ok{background:#1f9d55}
.kw.sc-no{background:#ffc9c9}.kb-black.sc-no{background:#d64545}
@media (max-width:620px){.sc-panel{padding:12px}.sc-head b{font-size:18px}.sc-row{gap:8px}.sc-sel{flex:1 1 100%}.sc-sel select{width:100%}.sc-seg{flex:1 1 auto;justify-content:space-between}.sc-btn{flex:1 1 0;justify-content:center;padding:0 12px}.sc-prog{order:3;flex-basis:100%}}
/* mixer: two channel strips with Volume and Tone knobs */
.mix-btn{width:44px;height:44px;flex:0 0 44px;border-radius:50%;background:#262420;border:1px solid #3a3630;color:var(--cream);display:grid;place-items:center;cursor:pointer;padding:0;box-sizing:border-box}
.mix-btn svg{display:block}
.mix-btn:hover,.mix-btn.open{border-color:var(--yellow);color:var(--yellow)}
.mix{position:relative;flex-basis:100%;display:flex;flex-wrap:wrap;gap:12px;background:#1d1b18;border:1px solid #3a3630;border-radius:22px;padding:14px;box-sizing:border-box;color:var(--cream)}
.mix-head{flex-basis:100%;display:flex;align-items:baseline;gap:12px;min-height:32px;padding:0 44px 0 4px;box-sizing:border-box;flex-wrap:wrap;row-gap:2px}
.mix-head b{display:inline-flex;align-items:center;gap:8px;font-family:var(--display);font-weight:600;font-size:18px}.mix-head b svg{display:block;color:var(--yellow)}
.mix-head span{color:#bfb6a4;font-weight:700;font-size:13.5px}
.mix[hidden]{display:none}
.mix-x{position:absolute;top:12px;right:12px}
.knob svg{position:relative;z-index:1}.knob::before{z-index:0}
.knob .k-ptr line{stroke:var(--yellow)!important}
.mix-strip{flex:1 1 300px;display:flex;align-items:center;justify-content:space-between;gap:14px;background:#262420;border:1px solid #3a3630;border-radius:18px;padding:12px 16px;box-sizing:border-box;min-width:0}
.ms-h{display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-width:0}
.ms-h b{display:inline-flex;align-items:center;gap:8px;font-family:var(--display);font-weight:600;font-size:18px}
.ms-h b svg{display:block;color:var(--yellow)}
.ms-h .pad-wave{color:var(--yellow)}
.ms-h .pad-styles{display:inline-flex;align-items:center;gap:2px;height:34px;padding:2px;box-sizing:border-box;background:#1d1b18;border:1px solid #3a3630;border-radius:999px}
.ms-h .pad-styles button{height:28px;padding:0 10px;font-size:12.5px}
.ms-k{display:flex;gap:14px;flex:0 0 auto}
.kn-wrap{display:flex;flex-direction:column;align-items:center;gap:4px}
.knob{position:relative;width:64px;height:64px;border-radius:50%;cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;outline:none}
.knob svg{display:block;width:64px;height:64px;overflow:visible}
.knob .k-trk,.knob .k-val{fill:none;stroke-width:6;stroke-linecap:round}
.knob .k-trk{stroke:#3a3630}
.knob .k-val{stroke:var(--yellow);transition:stroke-dasharray .05s}
.knob .k-ptr{transform-origin:32px 32px}
.knob .k-ptr line{stroke:var(--cream);stroke-width:3.5;stroke-linecap:round}
.knob::before{content:"";position:absolute;inset:13px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#3a3630,#1a1816 75%);box-shadow:0 2px 6px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.06)}
.knob .k-num{position:absolute;left:0;right:0;bottom:-2px;text-align:center;font-style:normal;font-family:var(--body);font-weight:900;font-size:11px;color:var(--yellow);pointer-events:none}
.knob .k-ctr{stroke:#6d6556;stroke-width:2;stroke-linecap:round;fill:none}
html.ffo-pan:where(:not(.fft-pan)) .kn-pan{display:none!important}
/* pan is the smaller, secondary knob: it takes less room so Piano, E-Piano and Pad still fit side by side; its label lines up with the others */
body.solo .rig-panel .kn-pan{justify-content:flex-end;align-self:stretch}
body.solo .rig-panel .kn-pan .knob{zoom:.78}
body.solo .rig-panel .kn-pan .knob .k-num{zoom:1.28}
body.solo .rig-panel .mix-drums .dr-body>.ms-k:has(.kn-pan){grid-template-columns:repeat(3,auto)}
html.ffo-pan:where(:not(.fft-pan)) body.solo .rig-panel .mix-drums .dr-body>.ms-k:has(.kn-pan){grid-template-columns:repeat(2,auto)}
.knob.turning{cursor:grabbing}.knob.turning .k-val{stroke:color-mix(in srgb,var(--yellow) 78%,#fff)}
.knob:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--yellow) 45%,transparent)}
.k-lab{font-weight:800;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#bfb6a4}
@media (max-width:620px){.mix{padding:12px}.mix-x{top:10px;right:10px}.mix-head span{font-size:12.5px}.mix-strip{flex-basis:100%;padding:10px 12px}.ms-k{gap:10px}.knob,.knob svg{width:58px;height:58px}.knob::before{inset:12px}}
/* phone tidy (v4): tools row fits, switches in neat pairs, panels below the chords */
@media (max-width:620px){
.kb-tools .pad-btn{width:44px;flex:0 0 44px;padding:0;justify-content:center}
.kb-tools .pad-btn #padLabel{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.kb-tools .mix,.kb-tools .sc-panel{order:5}
.kb-switches{row-gap:10px}
.kb-switches .kb-size{flex-basis:100%}
.sc-head{flex-wrap:wrap;row-gap:2px;padding-right:40px;position:relative}
.sc-head b{flex-basis:100%}
.sc-head .sc-x{position:absolute;top:-2px;right:0}
}
@media (max-width:620px){
.mix{min-width:0}
.mix-strip{flex-wrap:wrap;row-gap:10px}
.mix-strip .ms-h{display:contents}
.mix-strip .ms-h b{order:1;flex:1 1 auto}
.mix-strip .ms-k{order:2}
.mix-strip .ms-h .pad-styles{order:3;flex:1 1 100%;justify-content:space-between}
.mix-strip .ms-h .pad-styles button{flex:1 1 0}
}
/* Chord ideas (AI) */
html.ffo-aiprog:where(:not(.fft-aiprog)) #avIdeas,html.ffo-aiprog:where(:not(.fft-aiprog)) .ai-card{display:none!important}
.ai-card{position:fixed;z-index:8500;top:84px;right:20px;width:min(400px,calc(100vw - 32px));max-height:calc(100vh - 110px);overflow:auto;overscroll-behavior:contain;box-sizing:border-box;padding:16px 18px;border-radius:20px;background:#151310;border:1.5px solid #F6A801;box-shadow:0 24px 60px rgba(0,0,0,.6);color:#FBF6EC;font-family:var(--body)}
.ai-card .ai-x{position:static!important;width:30px;height:30px}
.ai-beta{font-style:normal;margin-left:6px;padding:2px 7px;border-radius:999px;background:rgba(246,168,1,.14);color:#FFC93D;letter-spacing:.06em}
.ai-p{margin:12px 0 8px;font:600 14.5px/1.45 var(--body);color:#e8e0cf}
.ai-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px;min-height:32px;align-items:center}
.ai-from .ai-chip{font-size:12.5px;height:24px;padding:0 9px}
.ai-chip{display:inline-flex;align-items:center;gap:4px;height:30px;padding:0 12px;border-radius:999px;background:#221f1a;border:1px solid #3a3630;font:800 14px/1 'Exo 2',var(--body);color:#FBF6EC}
.ai-chip.mine{padding-right:4px;border-color:rgba(246,168,1,.5)}
.ai-chip button{width:22px;height:22px;border:0;border-radius:50%;background:transparent;color:#8a8170;font:800 15px/1 var(--body);cursor:pointer}.ai-chip button:hover{color:#FBF6EC;background:#2c2924}
.ai-wait{font:600 13px/1.4 var(--body);color:#8a8170}
.ai-lab{margin:4px 0 6px;font:900 11px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:#8a8170}
.ai-seg{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;padding:4px;border-radius:999px;background:#1d1b18;border:1px solid #34302a;margin-bottom:12px}
.ai-seg button{height:30px;border:0;border-radius:999px;background:transparent;color:#bfb6a4;font:800 12.5px/1 var(--body);cursor:pointer;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ai-seg button[aria-pressed="true"]{background:#F6A801;color:#111}
.ai-msg{margin:0 0 10px;font:700 13.5px/1.4 var(--body);color:#ffb08a}
.ai-card .btn[disabled],.ai-card .cl-ghost[disabled]{opacity:.5;cursor:default}
.ai-idea{margin:0 0 10px;padding:12px 12px 10px;border-radius:14px;background:#1b1916;border:1px solid #2e2a25}
.ai-ih{display:flex;align-items:baseline;gap:8px;margin-bottom:8px}.ai-ih b{font:700 16px/1.2 var(--display)}
.ai-kind{flex:none;font:900 10.5px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:#F6A801}
.ai-why{margin:0 0 8px;font:600 13.5px/1.45 var(--body);color:#cfc6b4}
.ai-row{display:flex;gap:8px}.ai-row .cl-ghost{height:34px;font-size:13px}
@media (max-width:620px){.ai-card{top:calc(12px + env(safe-area-inset-top,0px));right:12px;left:12px;width:auto;max-height:calc(100vh - 110px - env(safe-area-inset-top,0px));padding:12px 14px}}
@media (max-width:520px){.ai-seg{grid-template-columns:repeat(3,minmax(0,1fr));border-radius:18px}}
/* MIDI learn */
.ml-ctl{margin-left:auto;display:inline-flex;align-items:center;gap:8px;align-self:center}
.ml-btn{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 14px 0 12px;border-radius:999px;border:1px solid #3a3630;background:#262420;color:#bfb6a4;font-family:var(--body);font-weight:800;font-size:13px;cursor:pointer;white-space:nowrap}
.ml-dot{width:9px;height:9px;border-radius:50%;background:#6b655b}
.ml-btn[aria-pressed="true"]{border-color:var(--yellow);color:var(--cream)}
.ml-btn[aria-pressed="true"] .ml-dot{background:var(--yellow);animation:recPulse 1s ease-in-out infinite}
.ml-clear{height:32px;padding:0 12px;border-radius:999px;border:0;background:transparent;color:#bfb6a4;font-family:var(--body);font-weight:800;font-size:13px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.ml-clear[hidden]{display:none}
.ml-done{height:32px;padding:0 16px;border-radius:999px;border:0;background:var(--yellow);color:#111;font-family:var(--body);font-weight:900;font-size:13px;cursor:pointer;margin-left:6px;box-shadow:0 0 0 3px rgba(246,168,1,.18)}.ml-done[hidden]{display:none}body.solo .kb-switches .ml-done{height:28px}
.kn-wrap{position:relative}
.k-cc{position:absolute;top:-6px;right:-10px;font-style:normal;background:var(--yellow);color:var(--black);font-weight:900;font-size:10px;line-height:1;padding:3px 6px;border-radius:999px;pointer-events:none}
.k-cc[hidden]{display:none}
.mix.learning .knob{cursor:pointer}
.mix.learning .knob::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px dashed color-mix(in srgb,var(--yellow) 45%,transparent)}
.mix.learning .knob.armed::after{border:3px solid var(--yellow);animation:scGlowK 1s ease-in-out infinite}
@keyframes scGlowK{50%{box-shadow:0 0 0 6px rgba(246,168,1,.25)}}
@media (max-width:620px){.ml-ctl{margin-left:0;flex-basis:100%}}
/* ---------- Solo piano page (ch-one.html, served at /ch-one, is generated from this file with ) ---------- */
.solo-only{display:none}
body.solo .solo-only{display:revert}
body.solo #menu,body.solo .menu-btn,body.solo .nav-sec,body.solo .nav-r>.btn,body.solo .hero-grid,body.solo .ticker,body.solo main>section:not(.hero),
body.solo .offer-pop,body.solo .cta-bar,body.solo .wa-fab,body.solo .ai-fab,body.solo .ai-panel,body.solo .kb-links,body.solo .free-strip{display:none!important}
body.solo .hero{padding:118px 0 56px;min-height:calc(100vh - 0px);box-sizing:border-box}
body.solo .hero .wrap{max-width:1320px}
/* piano page: no site footer, and the instrument (with the header) grows with the browser so big boards get room */
body.solo footer{display:none!important}
body.solo{--solo-w:1400px}
body.solo .hero .wrap{max-width:var(--solo-w)}body.solo .nav .wrap{max-width:1180px}
/* header stays one fixed size; the Piano title sits on the centre line, which is also the piano's centre */
body.solo .nav .wrap{position:relative}body.solo .solo-title{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0!important}
/* drag the wooden ends to make the instrument wider or narrower */
.kb-grip{display:none}
@media (min-width:1300px){
body.solo .kb-grip{display:block;position:absolute;top:0;bottom:0;width:30px;z-index:4;cursor:ew-resize;touch-action:none}
body.solo .kb-grip.l{left:-14px}body.solo .kb-grip.r{right:-14px}
body.solo .kb-grip::after{content:"";position:absolute;left:50%;top:50%;width:4px;height:44px;margin:-22px 0 0 -2px;border-radius:2px;background:repeating-linear-gradient(180deg,rgba(255,255,255,.5) 0 2px,transparent 2px 6px);opacity:0;transition:opacity .15s}
body.solo .kb-grip:hover::after,body.solo.kb-sizing .kb-grip::after{opacity:1}
body.solo.kb-sizing{cursor:ew-resize;user-select:none}
}
@media (min-width:621px){body.solo .hero .wrap{padding:0 34px}}
/* same header on every page: always reserve the scrollbar's space, so a short page (the piano) and a long one (home) centre the header identically */
html{scrollbar-gutter:stable}
body.solo .hero{min-height:100vh;padding-bottom:24px}
body.solo .kb-wrap{margin-top:0}
.solo-title{display:none;align-items:center;gap:10px;margin-left:14px;font-family:var(--display);font-weight:600;font-size:20px;color:var(--cream);white-space:nowrap}
.solo-title small{font-family:var(--body);font-weight:800;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--yellow);border:1px solid rgba(246,168,1,.45);border-radius:999px;padding:3px 9px}
body.solo .solo-title{display:inline-flex}
.solo-fs,.solo-home{display:none}
body.solo .solo-fs,body.solo .solo-home{display:inline-flex}
.solo-home{align-items:center;gap:6px;height:44px;padding:0 16px;border-radius:999px;background:var(--yellow);color:var(--black);font-family:var(--display);font-weight:600;font-size:15px;text-decoration:none;white-space:nowrap}
.solo-made{display:none;margin-top:18px;color:#8a8170;font-weight:700;font-size:13px;text-align:center}
.solo-made a{color:var(--yellow);text-decoration:none}
body.solo .solo-made{display:block}
@media (max-width:760px){body.solo .solo-title small{display:none}.solo-home{padding:0 12px;font-size:14px}body.solo .solo-home span{display:none}}
@media (max-width:520px){body.solo .solo-title{font-size:18px;margin-left:10px}body.solo .hero{padding-top:100px}body.solo .solo-home,body.solo .solo-fs{display:none!important}
body.solo .nav .brand{width:46px}body.solo .nav .brand .wordmark{opacity:0;transform:translateY(-50%) scale(.55)}body.solo .nav .brand .logo-round{opacity:1;transform:none}}
/* LED buttons + synth: piano page only */
body:not(.solo) .led-btn,body:not(.solo) .mix-synth,body:not(.solo) .rig-only{display:none!important}
.led-btn{display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 11px 0 9px;border-radius:7px;border:1px solid #3a3630;background:linear-gradient(#26241f,#181715);color:#cfc6b4;font-family:var(--body);font-weight:900;font-size:11px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;box-shadow:0 2px 0 #000}
.led-btn:active{transform:translateY(1px);box-shadow:0 1px 0 #000}
.led{width:9px;height:9px;border-radius:50%;background:#3a2c12;box-shadow:inset 0 1px 1px rgba(0,0,0,.6)}
.led-btn[aria-pressed="true"] .led{background:var(--yellow);box-shadow:0 0 6px 2px rgba(246,168,1,.75),inset 0 -1px 1px rgba(0,0,0,.25)}
.led-btn[aria-pressed="true"]{color:var(--cream)}
/* old-school rocker switch for each instrument's On (switch: rocker): a rectangular rocker in a dark bezel. Off: dark, tipped
down, marked O. On: tipped up, lit amber with a warm glow, marked I. The button and its On/Off state stay exactly the same */
html:not(.ffo-rocker:where(:not(.fft-rocker))) body.solo .rig-panel .ms-h .led-btn{position:relative;width:42px;min-width:42px;height:28px;padding:0!important;gap:0;border-radius:6px;border:1px solid #3a3630;background:linear-gradient(#0a0908,#141311);box-shadow:inset 0 2px 3px rgba(0,0,0,.85),0 1px 0 rgba(255,255,255,.05);color:transparent!important;font-size:0!important;perspective:60px;overflow:visible}
html:not(.ffo-rocker:where(:not(.fft-rocker))) body.solo .rig-panel .ms-h .led-btn .led{display:none}
html:not(.ffo-rocker:where(:not(.fft-rocker))) body.solo .rig-panel .ms-h .led-btn::before{content:"";position:absolute;inset:3px 4px;border-radius:3px;background:linear-gradient(180deg,#34312b 0%,#22201c 46%,#141311 54%,#2a2824 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 2px 2px rgba(0,0,0,.6);transform:rotateX(-16deg);transform-origin:50% 50%;transition:transform .16s cubic-bezier(.3,1.4,.5,1),background .16s,box-shadow .16s}
html:not(.ffo-rocker:where(:not(.fft-rocker))) body.solo .rig-panel .ms-h .led-btn::after{content:"O";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:900 10.5px/1 var(--body);letter-spacing:0;color:#7d7566;pointer-events:none;transform:translateY(1px);transition:color .16s,transform .16s}
html:not(.ffo-rocker:where(:not(.fft-rocker))) body.solo .rig-panel .ms-h .led-btn[aria-pressed="true"]::before{background:linear-gradient(180deg,#ffe08a 0%,#F6A801 44%,#c98a00 56%,#e7a204 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 0 10px rgba(246,168,1,.55),0 0 2px rgba(246,168,1,.9);transform:rotateX(16deg)}
html:not(.ffo-rocker:where(:not(.fft-rocker))) body.solo .rig-panel .ms-h .led-btn[aria-pressed="true"]::after{content:"I";color:#3a2600;transform:translateY(-1px)}
html:not(.ffo-rocker:where(:not(.fft-rocker))) body.solo .rig-panel .ms-h .led-btn:hover::before{filter:brightness(1.12)}
html:not(.ffo-rocker:where(:not(.fft-rocker))) body.solo .rig-panel .ms-h .led-btn:focus-visible{outline:2px solid var(--kl,#F6A801);outline-offset:2px}
@media (prefers-reduced-motion:reduce){html:not(.ffo-rocker:where(:not(.fft-rocker))) body.solo .rig-panel .ms-h .led-btn::before{transition:none}}
.syn-row{display:flex;flex-wrap:wrap;gap:8px}
.syn-sel{display:inline-flex;gap:2px;padding:2px;border-radius:8px;background:#141312;border:1px solid #3a3630}
.syn-sel button{height:26px;padding:0 9px;border:0;border-radius:6px;background:transparent;color:#a9a091;font-family:var(--body);font-weight:900;font-size:11px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.syn-sel button[aria-checked="true"]{background:#2e2b27;color:var(--yellow);box-shadow:inset 0 0 0 1px rgba(246,168,1,.35)}
/* ---------- Piano page: stage-keyboard look (black chassis, wood cheeks, LED-ring knobs, chord display) ---------- */
body.solo .kb-wrap{position:relative;background:linear-gradient(180deg,#262421 0%,#161514 38%,#0f0e0d 100%);border-radius:18px;padding:22px 40px 24px;margin-top:6px;
box-shadow:0 40px 80px -20px rgba(0,0,0,.8),0 0 0 1px #2c2a26,inset 0 1px 0 rgba(255,255,255,.07)}
body.solo .kb-wrap::before,body.solo .kb-wrap::after{content:"";position:absolute;top:0;bottom:0;width:22px;border-radius:14px;
background:repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 2px,transparent 2px 6px),linear-gradient(180deg,#6b4428,#4a2c18 55%,#341e10);box-shadow:inset 0 0 0 1px rgba(0,0,0,.4),inset 0 2px 0 rgba(255,255,255,.12)}
body.solo .kb-wrap::before{left:-10px}body.solo .kb-wrap::after{right:-10px}
/* the end cheeks are bevelled: light along the top and the inner edge, a rounded shade down the far edge, whatever the case or theme */
html body.solo:not(.th-national) .kb-wrap::before,html body.solo:not(.th-national) .kb-wrap::after{box-shadow:inset 0 0 0 1px rgba(0,0,0,.42),inset 0 3px 2px -1px rgba(255,255,255,.38),inset 5px 0 5px -3px rgba(255,255,255,.3),inset 1px 0 0 rgba(255,255,255,.22),inset -7px 0 8px -3px rgba(0,0,0,.42),inset 0 -5px 5px -2px rgba(0,0,0,.4)!important}
@media (max-width:620px){html body.solo:not(.th-national) .kb-wrap::before,html body.solo:not(.th-national) .kb-wrap::after{box-shadow:inset 0 0 0 1px rgba(0,0,0,.42),inset 0 2px 1px -1px rgba(255,255,255,.35),inset 3px 0 3px -2px rgba(255,255,255,.3),inset -4px 0 5px -2px rgba(0,0,0,.4)!important}}
body.solo .kb-wrap>.kb-hint{margin-bottom:16px}
.rig-panel{display:flex;flex-wrap:wrap;align-items:stretch;gap:0;margin:0 0 18px;padding:14px 0 16px;border-top:3px solid var(--yellow);border-bottom:1px solid #2c2a26;background:linear-gradient(180deg,rgba(255,255,255,.025),transparent)}
.rig-brand{display:flex;flex-direction:column;justify-content:center;gap:4px;padding:4px 22px 4px 6px;font-family:var(--display);font-weight:700;color:var(--yellow);font-size:22px;letter-spacing:.02em;line-height:1}
.rig-brand small{font-family:var(--body);font-weight:900;font-size:10px;letter-spacing:.24em;color:#8a8170;text-transform:uppercase}
body.solo .rig-panel .kb-side{order:1;width:300px!important;flex:0 0 300px!important;align-self:center;padding:10px;border-radius:12px;background:#0a0a09;box-shadow:inset 0 2px 8px rgba(0,0,0,.9),0 0 0 1px #2c2a26;margin-right:18px;transform:none!important}
body.solo .rig-panel .chord-pill{background:#14130f!important;border-color:#2c2a26!important}
body.solo .rig-panel .chord-pill.live{background:var(--yellow)!important}
body.solo .rig-panel .mix{order:2;flex:1 1 640px;display:flex;flex-wrap:wrap;gap:0;background:none;border:0;border-radius:0;padding:0;position:static}
body.solo .rig-panel .mix[hidden]{display:flex}
body.solo .rig-panel .mix-x,body.solo .rig-panel .mix-head>b,body.solo .rig-panel .mix-head>span:not(.ml-ctl){display:none}
body.solo .rig-panel .mix-head{order:9;flex:0 0 auto;flex-direction:column;justify-content:center;align-items:center;min-height:0;padding:0 0 0 16px;border-left:1px solid #2c2a26}
body.solo .rig-panel .ml-ctl{margin:0;flex-direction:column}
body.solo .rig-panel .mix-strip{flex:1 1 auto;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:12px;background:none;border:0;border-left:1px solid #2c2a26;border-radius:0;padding:2px 18px}
body.solo .rig-panel .ms-h{flex-direction:row;flex-wrap:wrap;align-items:center;gap:10px;display:flex!important}
body.solo .rig-panel .ms-h b{font-family:var(--body);font-weight:900;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--yellow);gap:7px}
body.solo .rig-panel .ms-h b svg,body.solo .rig-panel .ms-h .pad-wave{display:none}
body.solo .rig-panel .ms-k{gap:12px}
body.solo .rig-panel .pad-styles{height:30px!important;background:#141312!important;border-radius:8px!important}
body.solo .rig-panel .pad-styles button{height:24px!important;border-radius:6px!important;font-size:11px!important;letter-spacing:.06em;text-transform:uppercase}
body.solo .rig-panel .pad-styles button[aria-checked="true"]{background:#2e2b27!important;color:var(--yellow)!important}
body.solo .rig-panel .syn-row{flex-basis:100%}
/* LED-ring knobs */
body.solo .rig-panel .knob,body.solo .rig-panel .knob svg{width:68px;height:68px}
body.solo .rig-panel .knob .k-trk{stroke:#2a2724;stroke-width:5}
body.solo .rig-panel .knob .k-val{stroke-width:5;filter:drop-shadow(0 0 3px color-mix(in srgb,var(--yellow) 85%,transparent))}
body.solo .rig-panel .knob::before{inset:12px;background:radial-gradient(circle at 38% 30%,#5b5853 0,#2b2927 38%,#121110 75%);box-shadow:0 4px 8px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.18),0 0 0 2px #0b0b0a}
body.solo .rig-panel .knob .k-ptr line{stroke:var(--cream)!important;stroke-width:3}
body.solo .rig-panel .knob .k-num{bottom:-4px;font-size:10px;color:#e8dcc4}
body.solo .rig-panel .k-lab{font-size:10.5px;letter-spacing:.14em;color:#a9a091}
body.solo #mixBtn,body.solo #pianoMute,body.solo #padBtn{display:none!important}
body.solo .kb-scroll{padding-top:30px}
body.solo .rig-panel .kb-side{display:grid!important;grid-template-columns:1fr 1fr!important;justify-content:stretch!important;gap:8px!important}
body.solo .rig-panel .kb-side .chord-pill{grid-column:1/-1!important;grid-row:2!important;width:auto!important}
body.solo .rig-panel .kb-side .midi-btn,body.solo .rig-panel .kb-side .listen-btn{grid-row:1!important;width:auto!important;height:40px!important;border-radius:999px!important;padding:0 12px!important;justify-content:center}
body.solo .rig-panel .kb-side .midi-btn{grid-column:1!important}body.solo .rig-panel .kb-side .listen-btn{grid-column:2!important}
body.solo .rig-panel .kb-side .midi-btn #midiLabel,body.solo .rig-panel .kb-side .listen-btn span{position:static!important;width:auto!important;height:auto!important;clip:auto!important;overflow:visible!important}
body.solo .rig-panel .ms-h>*{order:0!important}
body.solo .rig-panel .ms-h b{flex:0 0 auto!important}
@media (max-width:1240px){body.solo .rig-panel .kb-side{flex-basis:100%!important;width:100%!important;margin:0 0 14px}body.solo .rig-panel .mix-strip:first-of-type{border-left:0}}
@media (max-width:620px){
body.solo .kb-wrap{padding:16px 14px 18px;border-radius:14px}body.solo .kb-wrap::before,body.solo .kb-wrap::after{width:10px;left:-6px}body.solo .kb-wrap::after{left:auto;right:-6px}
body.solo .rig-panel .mix-strip{flex-basis:100%;border-left:0;border-top:1px solid #2c2a26;padding:14px 4px}
body.solo .rig-panel .ms-k{flex-wrap:wrap;gap:8px}
body.solo .rig-panel .knob,body.solo .rig-panel .knob svg{width:54px;height:54px}
body.solo .rig-panel .ms-k{flex-wrap:nowrap;gap:16px;justify-content:flex-start}
body.solo .rig-panel .mix-synth .ms-k{gap:6px;width:100%;justify-content:space-between}
body.solo .rig-panel .kb-side .midi-btn::after{content:none!important}
body.solo .rig-panel .kb-side .midi-btn{flex-direction:row!important;gap:8px!important}
body.solo .rig-panel .knob::before{inset:10px}
body.solo .rig-panel .k-lab{font-size:9.5px;letter-spacing:.08em}
body.solo .rig-panel .mix-head{border-left:0;border-top:1px solid #2c2a26;padding:12px 0 0;flex-basis:100%;align-items:flex-start}
body.solo .rig-panel .ml-ctl{flex-direction:row}
}
/* ---------- piano page Premium: retro screen, Learn mode, email unlock ---------- */
body.solo #scTg,body.solo #scPanel{display:none!important}
.lcd,.ln-tg,.ln-panel{display:none}
body.solo .rig-panel .kb-side .chord-pill{display:none!important}
/* ch1: the keyboard area waits (hidden, keeping its space) until the rig panel is built, so the school page's kid chord pill
and buttons never flash on load. If the script ever fails, it shows anyway after 4 s */
body.solo #chordPill{display:none!important}
body.solo .kb-wrap:not(.np-on){visibility:hidden;animation:npShow 0s 25s forwards}
/* while the page is still arriving (a slow phone connection), a small loading mark sits where the rig will be, never the half-built rig */
.np-load{display:none}
/* the loading screen: the ch1 badge (glowing, a shine passing over it) beside a copy of the chord screen's start-up, with its bar and
percent climbing; it fades away the moment the rig is ready, and the rig's own screen carries on from the same look */
@property --nlp{syntax:'';inherits:true;initial-value:0}
body.solo .np-load{display:flex;align-items:center;justify-content:center;gap:16px;position:absolute;left:12px;right:12px;top:110px;z-index:5;pointer-events:none;transition:opacity .35s ease;animation:nlPct 9s cubic-bezier(.15,.7,.25,1) forwards}
body.solo .nl-plate{flex:none;position:relative;display:grid;place-items:center;width:72px;height:72px;box-sizing:border-box;border:3px solid #F6A801;border-radius:16px;background:#141210;overflow:hidden;animation:nlGlow 1.6s ease-in-out infinite alternate}
body.solo .nl-plate .ch1t{font-size:30px;color:#F6A801;padding-right:.06em}
body.solo .nl-plate::after{content:"";position:absolute;inset:-30%;background:linear-gradient(115deg,transparent 40%,rgba(255,220,140,.45) 50%,transparent 60%);transform:translateX(-120%);animation:nlShine 2.2s ease-in-out .3s infinite}
body.solo .nl-lcd{position:relative;flex:0 1 300px;min-width:0;display:flex;flex-direction:column;align-items:center;gap:9px;padding:14px 16px 12px;border-radius:10px;background:radial-gradient(130% 150% at 50% 0,#3a2805 0,#1f1503 75%);box-shadow:inset 0 0 0 1px #5a400a,inset 0 0 14px rgba(0,0,0,.6)}
body.solo .nl-lcd::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.14) 0 1px,transparent 1px 3px)}
body.solo .nl-logo{display:flex;flex-direction:column;align-items:center;gap:4px}
body.solo .nl-logo .ch1t{font-size:34px;color:#ffc93d;padding-right:.08em;text-shadow:0 0 6px rgba(255,176,0,.55),0 0 18px rgba(255,150,0,.25)}
body.solo .nl-logo .ch1t .ch1g{filter:drop-shadow(0 0 6px rgba(255,176,0,.55))}
body.solo .nl-logo small{font:800 9.5px/1 Nunito,sans-serif;letter-spacing:.32em;text-transform:uppercase;color:#d9a43a;opacity:.8;padding-left:.32em}
body.solo .nl-bar{width:100%;height:10px;box-sizing:border-box;padding:2px;border:1px solid rgba(255,201,61,.45);border-radius:3px}
body.solo .nl-bar i{display:block;height:100%;width:calc(var(--nlp)*1%);border-radius:1px;background:repeating-linear-gradient(90deg,#ffc93d 0 6px,transparent 6px 8px);box-shadow:0 0 6px rgba(255,176,0,.6)}
body.solo .nl-st{display:flex;justify-content:space-between;width:100%;font-family:'VT323',ui-monospace,Menlo,monospace;font-size:16px;line-height:1;letter-spacing:.06em;text-transform:uppercase;color:#ffc93d;text-shadow:0 0 2px #ffb000}
body.solo .nl-pct{font-variant-numeric:tabular-nums;counter-reset:nlp var(--nlp)}
body.solo .nl-pct::after{content:counter(nlp) "%"}
@keyframes nlPct{0%{--nlp:3}100%{--nlp:94}}
@keyframes nlGlow{from{box-shadow:0 0 0 rgba(246,168,1,0)}to{box-shadow:0 0 22px rgba(246,168,1,.45)}}
@keyframes nlShine{0%{transform:translateX(-120%)}60%,100%{transform:translateX(120%)}}
@media (max-width:420px){body.solo .nl-plate{width:58px;height:58px;border-radius:13px}body.solo .nl-plate .ch1t{font-size:24px}body.solo .nl-logo .ch1t{font-size:28px}}
@media (prefers-reduced-motion:reduce){body.solo .nl-plate,body.solo .nl-plate::after{animation:none}}
body.solo .np-load.np-gone{opacity:0;animation-play-state:paused}body.solo .np-load.np-hide{display:none}
@keyframes npSpin{to{transform:rotate(360deg)}}@keyframes npPulse{from{opacity:.55}to{opacity:1}}
body.solo #navMetro{display:none!important}
/* ch1: no page header; the rig starts near the top */
html body.solo #nav{display:none!important}
html body.solo:not(.fs-on) .hero{padding-top:26px!important}
body.solo .kb-switches .rig-tn,body.solo .kb-switches .rig-qs{display:inline-flex;align-items:center;justify-content:center;gap:0;order:12;padding-left:0!important;padding-right:0!important;width:36px;min-width:36px;flex:0 0 36px}
body.solo .kb-switches .rig-tn svg,body.solo .kb-switches .rig-qs svg{width:16px;height:16px}
body.solo.mob .kb-switches .rig-tn,body.solo.mob .kb-switches .rig-qs{display:none!important}
body.solo #tuner{cursor:grab;max-height:calc(100vh - 16px);overflow-y:auto;overscroll-behavior:contain}
@media (pointer:coarse){.tn-strings{gap:8px;flex-wrap:wrap}.tn-strings button{width:42px;height:42px;flex-basis:42px}.kl-keys button.kl-kt{width:36px!important;height:36px}.kl-keys button.kl-kt i{width:26px;height:26px}}body.solo #tuner.tn-drag{cursor:grabbing;user-select:none}body.solo #tuner button,body.solo #tuner input{cursor:pointer}
/* Setup in the top row looks exactly like the tuner and the rest of the row: the same pill, border and colours, no glow */
html body.solo .kb-switches .rig-qs.rig-qs{height:28px!important;width:36px!important;min-width:36px!important;flex:0 0 36px!important;padding:0!important;border-radius:999px!important;border:1px solid rgb(58,54,48)!important;background:transparent!important;box-shadow:none!important;color:rgb(191,182,164)!important;animation:none!important}
html body.solo .kb-switches .rig-qs.rig-qs:hover{color:#FBF6EC!important;border-color:rgba(246,168,1,.55)!important}
html body.solo .kb-switches .rig-qs.rig-qs::before,html body.solo .kb-switches .rig-qs.rig-qs::after{display:none!important}
body.solo .kb-switches .rig-fs{display:none;order:13}html.ffo-position:where(:not(.fft-position)) body.solo:not(.mob) .kb-switches .rig-fs,html body.solo:not(.kp-hump):not(.mob) .kb-switches .rig-fs{display:inline-flex;align-items:center;justify-content:center} /* ch1 has its own metronome on the rig; the old header one never shows, even while loading */
@keyframes npShow{to{visibility:visible}}
body.solo .lcd{display:block;grid-column:1/-1;grid-row:2;position:relative;overflow:hidden;box-sizing:border-box;min-width:0;padding:7px 12px 8px;border-radius:8px;background:radial-gradient(130% 150% at 50% 0,#3a2805 0,#1f1503 75%);box-shadow:inset 0 0 0 1px #5a400a,inset 0 0 14px rgba(0,0,0,.6),0 0 0 3px #050505;color:#ffc93d;font-family:'VT323',ui-monospace,Menlo,monospace;text-shadow:0 0 2px #ffb000,0 0 10px rgba(255,190,40,.55);line-height:1;text-transform:uppercase}
body.solo .lcd::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.12) 0 1px,transparent 1px 3px)}
.lcd-top{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:17px;letter-spacing:.06em;height:16px}
.lcd-top span{opacity:.92;white-space:nowrap}
.lcd-top .lcd-sus{opacity:.22;padding:0 4px;border:1px solid currentColor;border-radius:3px;line-height:13px}
.lcd-top .lcd-sus.on{opacity:1}
.lcd-main{display:flex;align-items:center;justify-content:space-between;gap:10px;height:44px;margin:3px 0 2px}
.lcd-main b{font-weight:400;font-size:46px;line-height:42px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;text-transform:none}
.lcd-main i{flex:none;font-style:normal;font-size:30px;line-height:30px;padding:0 7px;border:1.5px solid #ffc93d;border-radius:4px;text-transform:none}
.lcd-main i:empty{display:none}
.lcd-row{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:21px;height:20px;white-space:nowrap}
.lcd-row span{overflow:hidden;text-overflow:ellipsis;min-width:0;text-transform:none}
.lcd-row span+span{flex:none}
.lcd.idle .lcd-main b,.lcd.idle .lcd-row{opacity:.7}
.lcd.ok{animation:lcdOk .7s ease-out}
@keyframes lcdOk{0%{background:#5a4006}100%{background:#130d02}}
/* Learn toggle + panel */
body.solo .ln-tg{display:inline-flex}
body.solo .ln-panel:not([hidden]){display:block}
.ln-types{display:flex;flex-wrap:wrap;gap:6px}
.ln-types button{height:32px;min-width:52px;padding:0 11px;border-radius:999px;border:1px solid #3a3630;background:#262420;color:#d9cfbd;font-family:var(--body);font-weight:800;font-size:13px;cursor:pointer;box-sizing:border-box}
.ln-types button:hover{border-color:#5a544a;color:var(--cream)}
.ln-types button[aria-checked="true"]{background:var(--yellow);border-color:var(--yellow);color:var(--black)}
.ln-panel .sc-seg b{display:inline-block;min-width:34px;text-align:center;font-family:var(--display);font-weight:600;font-size:15px;color:var(--cream)}
.ln-panel .sc-seg button:disabled{opacity:.3;cursor:default}
.ln-panel .sc-msg{flex:1 1 200px;flex-basis:auto}
body.solo.learn-on #kbTools>:not(.ln-panel){display:none!important}
body.solo .ln-panel{margin-top:0;padding:12px 14px}
body.solo .ln-panel .sc-head{display:none}
body.solo .ln-panel .sc-row+.sc-row{margin-top:10px}
body.solo .ln-panel .sc-row:last-child{flex-wrap:nowrap}
body.solo .ln-panel .sc-seg{height:38px}
body.solo .ln-panel .sc-btn{height:38px;padding:0 14px;font-size:14px;white-space:nowrap}
body.solo .ln-panel .ln-close{margin-left:auto}
body.solo .ln-panel .sc-msg{display:none}
@media (max-width:1240px){body.solo .ln-panel .sc-row:last-child{flex-wrap:wrap}
body.solo .ln-types{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));flex:1 1 100%}body.solo .ln-types button{min-width:0;padding:0 4px}
body.solo .ln-panel .sc-row:last-child .sc-seg{flex:1 1 28%;justify-content:space-between}
body.solo .ln-panel .sc-row:last-child .sc-btn{flex:1 1 25%;justify-content:center}}
@media (max-width:999px) and (min-width:621px){body.solo .ln-panel .sc-row:last-child .sc-seg{flex:1 1 40%}body.solo .ln-panel .sc-row:last-child .sc-seg[aria-label="Inversion"]{flex-basis:100%;order:-1}}
@media (max-width:620px){body.solo .ln-types{grid-template-columns:repeat(6,minmax(0,1fr));gap:5px}body.solo .ln-types button{font-size:12px;height:30px;padding:0 2px}body.solo .ln-panel .sc-head{display:flex;margin:0 0 10px;min-height:32px}body.solo .ln-panel .sc-head span{display:none}body.solo .ln-panel .sc-head b{font-size:18px}body.solo .ln-panel .sc-row:last-child .sc-seg{flex:1 1 100%;justify-content:space-between}body.solo .ln-panel .sc-row:last-child .sc-btn{flex:1 1 28%;justify-content:center;padding:0 6px;font-size:13.5px;gap:6px}body.solo .ln-panel .ln-close{position:absolute;top:12px;right:12px}body.solo .ln-panel{position:relative}}
/* switch icons in brand yellow */
.sw-ic{color:var(--yellow);flex:none;display:inline-block;vertical-align:-3px}
.sw-aa{font-family:var(--display);font-weight:700;font-size:15px;line-height:16px;letter-spacing:-.02em;vertical-align:0}
#namesTg{gap:8px}
/* piano page: sustain sits in the right corner; no root dots on the keys */
body.solo .kb-switches .ml-ctl{margin-left:0!important}
body.solo #susInd{order:99;margin-left:auto}
body.solo #kb .kw.root::after,body.solo #kb .kb-black.root::after{content:none}
@media (max-width:620px){body.solo .ln-panel .sc-btn>span[aria-hidden]{display:none}body.solo .kb-switches .ml-ctl{flex-basis:auto}body.solo .kb-switches{column-gap:10px}}
/* Song chords panel */
.sg-tg,.sg-panel{display:none}
@media (min-width:621px){body.solo .kb-switches{column-gap:12px}body.solo .kb-switches .sus-ind{padding:0 10px 0 8px}}
body.solo .sg-tg{display:inline-flex}
body.solo .sg-panel:not([hidden]){display:block;position:relative;padding:14px}
body.solo.song-on #kbTools>:not(.sg-panel){display:none!important}
.sg-close{position:absolute;top:12px;right:12px;z-index:2}
.sg-grid{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:18px;align-items:start}
.sg-go [hidden]{display:none!important}
.sg-left{display:flex;flex-direction:column;gap:10px;min-width:0}
.sg-url{display:flex;gap:8px}
.sg-url input{flex:1 1 auto;min-width:0;height:40px;border-radius:999px;border:1px solid #3a3630;background:#141312;color:var(--cream);padding:0 16px;font:700 14px var(--body)}
.sg-url input:focus{outline:none;border-color:var(--yellow)}
.sg-url .sc-btn{height:40px}
.sg-video{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#0b0b0a;box-shadow:inset 0 0 0 1px #2c2a26}
.sg-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.sg-ph{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:16px;color:#8a8170;font-weight:800;font-size:14px}
.sg-right{display:flex;flex-direction:column;gap:12px;min-width:0;padding-right:40px}
.sg-now{position:relative;overflow:hidden;border-radius:10px;padding:10px 14px 12px;background:radial-gradient(130% 150% at 50% 0,#3a2805 0,#1f1503 75%);box-shadow:inset 0 0 0 1px #5a400a,0 0 0 3px #050505;color:#ffc93d;font-family:'VT323',ui-monospace,monospace;text-shadow:0 0 2px #ffb000,0 0 10px rgba(255,190,40,.5)}
.sg-now::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.12) 0 1px,transparent 1px 3px)}
.sg-top{display:flex;justify-content:space-between;gap:10px;font-size:17px;text-transform:uppercase;letter-spacing:.06em;opacity:.92}
.sg-main{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:4px 0 6px;min-height:62px}
.sg-main b{font-weight:400;font-size:64px;line-height:62px}
.sg-main i{font-style:normal;font-size:34px;line-height:34px;padding:0 8px;border:1.5px solid #ffc93d;border-radius:5px}
.sg-main i:empty{display:none}
.sg-hist{display:flex;gap:10px;font-size:20px;min-height:22px;overflow:hidden;white-space:nowrap;opacity:.75}
.sg-hist span.on{opacity:1;text-decoration:underline}
.sg-panel.live .sg-top span:first-child::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:#ff4d4d;margin-right:7px;vertical-align:2px;box-shadow:0 0 8px #ff4d4d;animation:sgBlink 1.2s infinite}
@keyframes sgBlink{50%{opacity:.3}}
.sg-go{display:flex;flex-wrap:wrap;gap:8px}
.sg-go .sc-btn{height:40px;padding:0 16px;font-size:14px}
.sg-go .sc-btn span{font-size:15px}
.sg-go #sgScan{order:-1;background:var(--yellow);border-color:var(--yellow);color:var(--black)}
.sg-go:has(#sgScan:not([hidden])) #sgTab:not(.on){background:#262420;border-color:#3a3630;color:var(--cream)}
.sg-getting .sg-go :is(#sgTab,#sgMic,#sgRoot){display:none!important}
.sg-go #sgScan.on{background:#3a1d1d;border-color:#ff6b6b;color:#ffb3b3}
.sg-pick{border:1px solid #3a3630;background:#1b1a18;border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:10px}
.sg-pick[hidden]{display:none}
html.ffo-songscan:where(:not(.fft-songscan)) .sg-pick{display:none!important}
.sg-pick-q{font-family:var(--display);font-weight:600;font-size:16px;color:var(--cream)}
.sg-pick-o{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sg-pick-o button{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:10px;row-gap:3px;align-items:center;text-align:left;padding:12px;border-radius:12px;border:1px solid #3a3630;background:#262420;color:var(--cream);font-family:var(--body);cursor:pointer}
.sg-pick-o button>span{grid-row:1/3;font-size:22px;line-height:1}
.sg-pick-o button b{font-weight:900;font-size:14.5px}
.sg-pick-o button small{color:#bfb6a4;font-weight:700;font-size:12.5px;line-height:1.35}
.sg-pick-o button:hover,.sg-pick-o button:focus-visible{border-color:var(--yellow);outline:none}
.sg-pick-o button.last{box-shadow:inset 0 0 0 1px var(--yellow)}
.sg-pick-x{align-self:flex-start;background:none;border:0;color:#8a8170;font:800 12.5px var(--body);cursor:pointer;padding:2px 0}
.sg-pick-x:hover{color:var(--cream)}
@media (max-width:620px){.sg-pick-o{grid-template-columns:1fr}}
.sg-prog{position:relative;height:4px;margin-top:8px;border-radius:2px;background:rgba(255,201,61,.16);overflow:hidden}
.sg-prog[hidden]{display:none}
.sg-prog i{position:absolute;left:0;top:0;bottom:0;width:0;background:#ffc93d;box-shadow:0 0 8px #ffb000;transition:width .4s linear}
.sg-prog.busy i{width:30%!important;animation:sgBusy 1.1s ease-in-out infinite alternate;transition:none}
@keyframes sgBusy{from{left:0}to{left:70%}}
.sg-msg{margin:0;color:#bfb6a4;font-weight:700;font-size:13.5px;line-height:1.45}
.sg-msg b{color:var(--cream)}
#kb .kw.sg-t{box-shadow:inset 0 -6px 0 var(--yellow);background:#fff3d1}
/* Play along: the next chord's keys glow a beat before it comes */
#kb .kw.sg-nx{box-shadow:inset 0 0 0 3px var(--yellow),inset 0 -6px 0 var(--yellow);animation:sgNx .5s ease-in-out infinite alternate}
#kb .kb-black.sg-nx{box-shadow:inset 0 0 0 2.5px var(--yellow),inset 0 -5px 0 var(--yellow);animation:sgNx .5s ease-in-out infinite alternate}
#kb .kw.sg-nx:not(.sg-t){background:#fff8e6}
@keyframes sgNx{from{filter:brightness(1)}to{filter:brightness(1.12)}}
@media (prefers-reduced-motion:reduce){#kb .sg-nx{animation:none}}
.sg-lane{position:relative;height:36px;margin-top:6px;overflow:hidden;border-radius:6px;background:rgba(0,0,0,.22);box-shadow:inset 0 0 0 1px rgba(255,201,61,.18)}
.sg-lane[hidden]{display:none}
.sg-ltr{position:absolute;left:0;top:0;bottom:0;will-change:transform}
.sg-lc{position:absolute;top:5px;bottom:5px;box-sizing:border-box;padding:0 6px;border-left:2px solid #ffc93d;font-size:22px;line-height:26px;white-space:nowrap;overflow:hidden;text-overflow:clip}
.sg-lb{position:absolute;top:0;bottom:0;width:1px;background:rgba(255,201,61,.45)}
.sg-lk{position:absolute;bottom:2px;width:3px;height:3px;margin-left:-1.5px;border-radius:50%;background:rgba(255,201,61,.5)}
.sg-ll{position:absolute;top:0;bottom:0;background:rgba(255,201,61,.14);border-left:2px solid rgba(255,201,61,.7);border-right:2px solid rgba(255,201,61,.7);box-sizing:border-box}
.sg-ll[hidden]{display:none}
.sg-lane::before{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--ph,25%);z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(31,21,3,.85),rgba(31,21,3,.45))}
.sg-lph{position:absolute;top:0;bottom:0;left:var(--ph,25%);z-index:2;width:2px;margin-left:-1px;background:#ffc93d;box-shadow:0 0 8px #ffb000}
.sg-panel.sg-follow .sg-hist{display:none}
.sg-panel.sg-follow .sg-next{font:400 26px/1 'VT323',ui-monospace,monospace;color:#ffc93d;opacity:.6;letter-spacing:.03em;text-transform:none}
.sg-panel.sg-follow .sg-next.soon{opacity:1;text-shadow:0 0 10px rgba(255,190,40,.7)}
.sg-pl{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.sg-pl[hidden]{display:none}
.sg-pb{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:36px;padding:0 13px;border-radius:999px;border:1px solid #3a3630;background:#262420;color:var(--cream);font:800 13px/1 var(--body);cursor:pointer;white-space:nowrap}
.sg-pb svg{flex:none}
.sg-pb:hover,.sg-pb:focus-visible{border-color:#6b6458;outline:none}
.sg-pb.on{border-color:var(--yellow);color:var(--yellow)}
.sg-pb.arm{border-color:var(--yellow);border-style:dashed;color:var(--yellow)}
.sg-pb.hit{background:#3a2e12}
.sg-sync{display:inline-flex;align-items:center;height:36px;border-radius:999px;border:1px solid #3a3630;background:#262420;overflow:hidden}
.sg-sync button{width:32px;height:100%;border:0;background:none;color:var(--cream);font:800 16px/1 var(--body);cursor:pointer}
.sg-sync button:hover{background:#3a3630}
.sg-sync b{min-width:86px;text-align:center;color:#bfb6a4;font:800 12.5px/1 var(--body);font-variant-numeric:tabular-nums;white-space:nowrap}
.sg-sync b.on{color:var(--yellow)}
.sg-bar.lp{background:#2a2414;border-color:#6b5a2a}
.sg-bar.lp.now{border-color:var(--yellow)}
#kb .kb-black.sg-t{box-shadow:inset 0 -5px 0 var(--yellow);background:#5c4300}
/* Song chord chart */
.sg-chart{margin-top:16px;border-top:1px solid #3a3630;padding-top:14px}
.sg-ch-h{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin-bottom:12px}
.sg-ch-t{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;min-width:0}
.sg-ch-t b{font-family:var(--display);font-weight:600;font-size:19px;color:var(--cream)}
.sg-ch-t span{color:#bfb6a4;font-weight:800;font-size:13px}
.sg-ch-c{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.sg-seg{height:36px;padding:3px}.sg-seg button{height:28px;font-size:12.5px;white-space:nowrap}
.sg-fix{display:inline-flex;align-items:center;gap:2px;height:36px;padding:3px;box-sizing:border-box;background:#262420;border:1px solid #3a3630;border-radius:999px}
.sg-fix span{color:#bfb6a4;font-weight:800;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;padding:0 6px;white-space:nowrap}
.sg-fix button{width:28px;height:28px;border-radius:50%;border:0;background:#3a3630;color:var(--cream);display:grid;place-items:center;font:900 12px var(--body);cursor:pointer;padding:0}
.sg-fix button:hover{background:#4a453d}
.sg-num{height:36px;padding:0 12px;border-radius:999px;border:1px solid #3a3630;background:#262420;color:#bfb6a4;font:900 12px var(--body);letter-spacing:.06em;cursor:pointer}
.sg-num.on{border-color:var(--yellow);color:var(--yellow)}
.sg-bars{max-height:316px;overflow:auto;display:flex;flex-direction:column;gap:8px;padding-right:4px;overscroll-behavior:contain}
.sg-empty{margin:0;padding:18px;border:1px dashed #3a3630;border-radius:12px;color:#8a8170;font-weight:800;font-size:14px;line-height:1.45;text-align:center}
.sg-line{display:grid;grid-template-columns:28px minmax(0,1fr);align-items:center;gap:10px}
.sg-sec{width:28px;height:28px;border-radius:50%;background:var(--yellow);color:var(--black);display:grid;place-items:center;font:900 13px var(--body)}
.sg-sec.none{background:transparent}
.sg-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.sg-bar{position:relative;height:58px;border-radius:10px;background:#262420;border:1px solid #3a3630;box-sizing:border-box;overflow:hidden}
.sg-panel.yt .sg-bar{cursor:pointer}.sg-panel.yt .sg-bar:hover{border-color:#6b6458}
.sg-bar em{position:absolute;top:5px;left:8px;font:800 10px/1 var(--body);font-style:normal;color:#8a8170}
.sg-bar .c{position:absolute;top:19px;left:calc(8px + (100% - 16px) * var(--p) / var(--m));display:flex;flex-direction:column;gap:3px;line-height:1}
.sg-bar .c b{font-family:var(--display);font-weight:600;font-size:21px;color:var(--cream);white-space:nowrap}
.sg-bar .c small{font:900 11px/1 var(--body);color:var(--yellow)}
.sg-bar .rest b{color:#5a554c}
.sg-bar.now{border-color:var(--yellow);background:#2e2615;box-shadow:inset 0 0 0 1px var(--yellow)}
/* the beat inside the bar: a short glowing segment along the bottom edge (clear of the chord and its number) */
.sg-bar .dot{position:absolute;bottom:2px;left:calc(8px + (100% - 16px) * var(--p) / var(--m));width:calc((100% - 16px) / var(--m) - 4px);height:3px;border-radius:2px;background:var(--yellow);box-shadow:0 0 6px var(--yellow)}
.sg-bar.pk{grid-column:4;border-style:dashed;opacity:.8}
.sg-brk{display:flex;align-items:center;gap:10px;color:#8a8170;font:800 10.5px var(--body);letter-spacing:.12em;text-transform:uppercase}
.sg-brk::before,.sg-brk::after{content:"";flex:1;border-top:1px dashed #3a3630}
.sg-ch-f{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;align-items:center}
.sg-ch-f input{flex:1 1 220px;min-width:0;height:40px;border-radius:999px;border:1px solid #3a3630;background:#141312;color:var(--cream);padding:0 16px;font:700 14px var(--body);box-sizing:border-box}
.sg-ch-f input:focus{outline:none;border-color:var(--yellow)}
.sg-ch-f .sc-btn{height:40px;font-size:14px;padding:0 16px}
.sg-ch-f .sc-btn:disabled,.sg-ch-f .sc-btn[disabled]{opacity:.45;cursor:not-allowed}
@media (max-width:620px){.sg-line{grid-template-columns:22px minmax(0,1fr);gap:6px}.sg-sec{width:22px;height:22px;font-size:11px}.sg-row{gap:4px}.sg-bar{height:52px;border-radius:8px}.sg-bar em{left:6px}.sg-bar .c{left:calc(6px + (100% - 12px) * var(--p) / var(--m));top:18px}.sg-bar .c b{font-size:15px}.sg-bar .c small{font-size:10px}.sg-ch-c{width:100%}.sg-seg{flex:1 1 100%;justify-content:space-between}.sg-seg button{flex:1 1 0}.sg-fix{flex:1 1 auto;justify-content:space-between}.sg-fix span{padding:0 3px;font-size:9.5px;letter-spacing:.04em}.sg-num{flex:0 0 auto;padding:0 10px}.sg-seg button[data-m=auto]{flex:1.7 1 0}.sg-ch-f .sc-btn{flex:1 1 0;justify-content:center}.sg-ch-f input{flex-basis:100%}}
@media (max-width:820px){.sg-grid{grid-template-columns:minmax(0,1fr)}.sg-right{padding-right:0}.sg-url{padding-right:40px}}
/* home page keyboard kept minimal: no staff, scales or pad, up to 61 keys, mixer = piano volume and tone */
body:not(.solo) #staffTg,body:not(.solo) #scTg,body:not(.solo) #scPanel,body:not(.solo) #padBtn,
body:not(.solo) .kb-size [data-keys="76"],body:not(.solo) .kb-size [data-keys="88"],
body:not(.solo) .mix .mix-strip:has(.pad-styles),body:not(.solo) .mix .mix-synth,body:not(.solo) .mix .mix-drums,body:not(.solo) .flip-tab{display:none!important}
body:not(.solo) .mix .mix-strip{flex:1 1 100%}
/* computer-keyboard zone: a soft yellow frame over the keys your typing keys play, with each key's letter */
.kzone,.kkey,.km-tg{display:none}
body.solo .km-tg{display:inline-flex}
body.solo.kmap-on .kzone,body.solo.kmap-peek .kzone{display:block}body.solo.kmap-on .kkey{display:block}
.kzone{position:absolute;top:-6px;bottom:-6px;border:2px solid rgba(246,168,1,.35);border-radius:10px;pointer-events:none;z-index:4;transition:left .35s cubic-bezier(.2,.8,.2,1),width .35s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .3s}
.kzone{border-color:var(--yellow)!important;box-shadow:0 0 0 1px rgba(246,168,1,.25),0 0 22px rgba(246,168,1,.35)}
.kzone.bump{animation:kzBump .3s}
@keyframes kzBump{30%{transform:translateX(-6px)}70%{transform:translateX(6px)}}
.kkey{position:absolute;left:50%;transform:translateX(-50%);top:calc(60% + 10px);font-style:normal;font-family:var(--body);font-weight:800;font-size:10px;line-height:1;color:#a39a89;pointer-events:none;letter-spacing:.02em}
.kb-black .kkey{top:auto;bottom:8px;color:#8a8170}
.kw.on .kkey{color:#6b4f00}
@media (hover:none) and (pointer:coarse){body.solo .kzone,body.solo .kkey,.km-tg{display:none!important}}
/* lit keys: soft yellow, the root a deeper yellow, a letter badge on each */
#kb .kw.ln-t{background:#ffefc4}
#kb .kw.ln-t.ln-r{background:#ffd877}
#kb .kb-black.ln-t{background:#8a6200}
#kb .kb-black.ln-t.ln-r{background:#c58c00}
#kb .kw.ln-t.on,#kb .kb-black.ln-t.on{background:var(--yellow)}
#kb .kw.ln-ok{background:#c9f2d6!important}#kb .kb-black.ln-ok{background:#1f9d55!important}
.lnb{position:absolute;left:50%;transform:translateX(-50%);bottom:56px;min-width:26px;height:26px;padding:0 5px;box-sizing:border-box;border-radius:13px;background:var(--black);color:var(--yellow);font-family:var(--display);font-weight:700;font-size:13px;line-height:26px;text-align:center;pointer-events:none;z-index:3;white-space:nowrap}
.ln-r .lnb{background:var(--yellow);color:var(--black);box-shadow:0 0 0 2px var(--black)}
.kb-black .lnb{bottom:12px;background:var(--yellow);color:var(--black);box-shadow:0 0 0 2px var(--black)}
.kb-black.ln-r .lnb{background:#fff}
.kb.many .lnb{min-width:22px;height:22px;line-height:22px;font-size:11.5px;padding:0 3px;bottom:44px}.kb.many .kb-black .lnb{bottom:8px}
/* email unlock */
.pgate{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:16px;box-sizing:border-box;background:rgba(17,17,17,.62);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);overflow:auto}
/* ch1 accounts: the dark sign-in card that replaces the welcome card on chordhouse.app (switch: accounts) */
.pgate.acct-wait .pg-card{visibility:hidden}
.pgate.acct-on .pg-card{display:none}
.ac-card{position:relative;width:min(400px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;margin:auto;padding:26px 24px 18px;border-radius:24px;
background:radial-gradient(120% 70% at 50% 0,#2a2214 0,#1a1814 46%,#141311 100%);border:1px solid #3a3630;box-shadow:0 30px 80px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.04);
color:#FBF6EC;font:500 15px/1.5 var(--body);text-align:center;animation:acIn .32s cubic-bezier(.2,.8,.2,1)}
.ac-card::before{content:"";position:absolute;inset:0 22% auto;height:3px;border-radius:0 0 4px 4px;background:#F6A801;box-shadow:0 0 18px rgba(246,168,1,.6)}
@keyframes acIn{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
.ac-top{display:flex;flex-direction:column;align-items:center;gap:8px;margin:4px 0 16px}
.ac-logo{display:block;width:96px;height:46px}.ac-logo svg{width:100%;height:100%;fill:#F6A801;color:#F6A801;filter:drop-shadow(0 0 10px rgba(246,168,1,.45))}
.ac-top small{font:800 10.5px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:#8a8170}
.ac-card h2{margin:0 0 6px;font:800 23px/1.2 var(--body);letter-spacing:-.01em;color:#FBF6EC}
.ac-p{margin:0 auto 16px;max-width:320px;font-size:14px;color:#a99f8e;text-wrap:balance}.ac-p b{color:#FBF6EC;word-break:break-all}
.ac-card form{display:flex;flex-direction:column;gap:10px}
.ac-in,.ac-pw input{width:100%;height:50px;padding:0 16px;border-radius:14px;border:1.5px solid #3a3630;background:#0f0e0c;color:#FBF6EC;font:600 16px/1 var(--body);outline:none;transition:border-color .15s,box-shadow .15s}
.ac-in::placeholder,.ac-pw input::placeholder{color:#6f675a}
.ac-in:focus,.ac-pw input:focus{border-color:#F6A801;box-shadow:0 0 0 4px rgba(246,168,1,.16)}
.ac-pw{position:relative}.ac-pw input{padding-right:52px}
.ac-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:40px;height:40px;border:0;border-radius:10px;background:none;color:#8a8170;cursor:pointer;display:grid;place-items:center}
.ac-eye:hover,.ac-eye[aria-pressed="true"]{color:#F6A801}
.ac-go{height:52px;margin-top:4px;border:0;border-radius:999px;background:#F6A801;color:#111;font:800 16px/1 var(--body);cursor:pointer;box-shadow:0 8px 22px rgba(246,168,1,.25);transition:transform .12s,filter .15s}
.ac-go:hover{filter:brightness(1.06)}.ac-go:active{transform:scale(.985)}.ac-go:disabled{opacity:.6;cursor:default}
.ac-g{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:50px;border-radius:999px;border:1.5px solid #3a3630;background:#FBF6EC;color:#111;font:800 15px/1 var(--body);cursor:pointer;transition:filter .15s}
.ac-g:hover{filter:brightness(.96)}
.ac-or{display:flex;align-items:center;gap:12px;margin:14px 0;color:#6f675a;font:700 11.5px/1 var(--body);text-transform:uppercase;letter-spacing:.12em}
.ac-or::before,.ac-or::after{content:"";flex:1;height:1px;background:#2c2a26}
.ac-err{min-height:1px;margin:10px 0 0;font:700 13.5px/1.45 var(--body);color:#ff8a73}.ac-err:empty{margin:0}
.ac-inl,.ac-links button,.ac-foot button{border:0;background:none;padding:2px 0;color:#F6A801;font:800 13.5px/1.4 var(--body);cursor:pointer;text-decoration:underline;text-decoration-color:rgba(246,168,1,.4);text-underline-offset:3px}
.ac-links{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 10px;margin:14px 0 0;font:700 13.5px/1.4 var(--body);color:#8a8170}
.ac-links button:disabled{opacity:.45;cursor:default}
.ac-foot{margin:16px -24px 0;padding:12px 24px 0;border-top:1px solid #2c2a26}.ac-foot button{color:#a99f8e;font-weight:700;font-size:12.5px}
.ac-code{position:relative;height:58px}
.ac-code input{position:absolute;inset:0;width:100%;height:100%;opacity:0;font-size:16px;border:0;caret-color:transparent;z-index:2;cursor:text}
.ac-cells{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;height:100%}
.ac-cells i{display:grid;place-items:center;border-radius:12px;border:1.5px solid #3a3630;background:#0f0e0c;font:800 26px/1 ui-monospace,Menlo,monospace;font-style:normal;color:#F6A801}
.ac-cells i.on{border-color:#F6A801;box-shadow:0 0 0 4px rgba(246,168,1,.16)}
.ac-h{color:#6f675a;font:600 12px/1.4 var(--body)}
/* signing in (2026-10-29): after Google or a password is accepted, the card says so until the rig opens, so a slow line never looks stuck */
.ac-wait{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;border-radius:inherit;background:#161411;text-align:center;padding:24px}
.ac-wait[hidden]{display:none}
.ac-wait b{font:800 19px/1.2 var(--display,'Fredoka'),sans-serif;color:#FBF6EC}
.ac-wait small{font:600 13px/1.3 var(--body);color:#a39a88}
.ac-spin{width:38px;height:38px;border-radius:50%;border:3px solid rgba(246,168,1,.22);border-top-color:#F6A801;animation:acSpin .8s linear infinite;margin-bottom:4px}
@keyframes acSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.ac-spin{animation-duration:2.4s}}
@media (max-width:420px){.ac-card{padding:22px 16px 16px;border-radius:20px}.ac-foot{margin:14px -16px 0;padding:12px 16px 0}.ac-cells{gap:6px}.ac-card h2{font-size:21px}}
@media (prefers-reduced-motion:reduce){.ac-card{animation:none}}
.pgate.out{opacity:0;transition:opacity .3s}
.pg-card{position:relative;width:100%;max-width:420px;box-sizing:border-box;background:var(--cream);color:var(--black);border-radius:24px;padding:28px 26px 22px;text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.5);border-top:6px solid var(--yellow)}
.pg-logo{width:76px;height:76px;display:block;margin:0 auto 12px;border-radius:22%}
.pg-k{margin:0 0 6px;font-weight:900;font-size:12px;letter-spacing:.2em;color:#8a7f6c}
.seat-ov{z-index:400}
.rv-tb{display:inline-flex;gap:6px}
.rv-toast .rv-tb button{width:auto;height:30px;padding:0 12px;border-radius:999px;background:var(--yellow);color:#111;font:800 12.5px/1 Nunito,sans-serif}
.rv-toast .rv-tb button+button{background:#2c2924;color:#ffc93d}
.rg-seg.rg-dis{opacity:.38;pointer-events:none}
/* Keys only: the ch1 mark leads the toolbar (Sustain moves along) */
html body.solo:not(.mob) .kb-switches>.rig-plate.ch1-plate.pl-top{order:0!important;flex:none!important;position:relative!important;inset:auto!important;margin:0 6px 0 0!important;zoom:1!important;width:36px!important;height:36px!important;min-width:36px!important;align-self:center}
/* a real size, not zoom: Safari lays out a zoomed item at its full size, so the next buttons slid over the mark */
html body.solo:not(.mob) .kb-switches>.rig-plate.ch1-plate.pl-top>svg{width:100%!important;height:100%!important;display:block}
/* video call */
.cx-call{display:grid;gap:8px;margin:10px 0 12px;padding:12px;border-radius:14px;background:#151412;box-shadow:inset 0 0 0 1px #2c2a26}
.cx-call .cxc-go{background:#F6A801!important;color:#111!important;border-color:#F6A801!important}
.cx-call .cxc-go:disabled{opacity:.45;cursor:default}
.cx-call .cxc-n,.cx-call .cxc-msg{font:700 12px/1.4 var(--body);color:#8a8170;margin:0}.cx-call .cxc-msg{color:#e0b25a}
.cx-call .cxc-row{display:flex;gap:8px;flex-wrap:wrap}.cx-call .cxc-row .bg-btn{flex:1 1 auto}
.cx-call .cxc-st{margin:0;font:800 13.5px/1.3 var(--body);color:#2EE6B6}
.cx-call .cxc-ring b{display:block;margin-bottom:8px;font:800 14px/1.3 var(--body);color:#FBF6EC}
.cx-call .cxc-hear{display:flex;align-items:center;gap:8px;font:700 12.5px/1.3 var(--body);color:#cfc6b4;cursor:pointer}
.cx-call .cxc-hear input{accent-color:#F6A801;width:16px;height:16px}
.cam.cx-cam{background:#000}.cam.cx-cam>video:first-child{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}
.cx-cam .cx-self{position:absolute;right:8px;bottom:8px;width:24%;aspect-ratio:16/9;object-fit:cover;border-radius:8px;box-shadow:0 0 0 1px rgba(255,255,255,.25),0 4px 12px rgba(0,0,0,.5);transform:scaleX(-1);pointer-events:none;z-index:2}
.cx-cam.cx-selfoff .cx-self{opacity:0}
.cx-cam .cx-cam-n{position:absolute;left:10px;top:8px;z-index:2;padding:3px 9px;border-radius:999px;background:rgba(0,0,0,.55);color:#fff;font:800 12px/1.3 var(--body)}
.cx-cam .cx-cam-b{position:absolute;left:50%;bottom:10px;translate:-50% 0;z-index:3;display:flex;gap:8px;opacity:0;transition:opacity .2s}
.cx-cam:hover .cx-cam-b,.cx-cam:focus-within .cx-cam-b{opacity:1}@media (hover:none){.cx-cam .cx-cam-b{opacity:.9}}
.cx-cam .cx-cam-b button{width:34px;height:34px;border-radius:50%;border:0;padding:0;display:grid;place-items:center;cursor:pointer;color:#fff;background:rgba(20,18,16,.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 0 0 1px rgba(255,255,255,.16)}
.cx-cam .cx-cam-b button.off{background:#c8232b}.cx-cam .cx-cam-b .cx-end{background:#e5383b;width:44px;border-radius:999px}
.cx-cam .cam-ly{right:8px}
#avConn.cx-ringing{animation:cxRing 1s ease-in-out infinite}@keyframes cxRing{50%{box-shadow:0 0 0 4px rgba(46,230,182,.45)}}
/* Master on the toolbar: the same knob, sized to the row */
html body.solo:not(.mob) .kb-switches>#mvWrap.mv-top{order:1!important;zoom:1!important;margin:0!important;flex:none!important;align-self:center;display:inline-flex!important;align-items:center;gap:7px;height:28px;padding:0 12px 0 4px!important;box-sizing:border-box;border-radius:999px;background:#1d1b18;box-shadow:inset 0 0 0 1px #34302a;width:auto!important;min-width:0!important}
html body.solo:not(.mob) .kb-switches>#mvWrap.mv-top .mv-k{width:22px!important;height:22px!important;flex:none}
html body.solo:not(.mob) .kb-switches>#mvWrap.mv-top .mv-k svg{width:22px!important;height:22px!important}
html body.solo:not(.mob) .kb-switches>#mvWrap.mv-top .mv-t{display:inline-flex!important;flex-direction:row!important;align-items:baseline;gap:6px;line-height:1}
html body.solo:not(.mob) .kb-switches>#mvWrap.mv-top .mv-t b{font:800 13.5px/1 var(--body)!important;letter-spacing:0!important;text-transform:none!important;color:#d9cfbd!important;margin:0!important}
html body.solo:not(.mob) .kb-switches>#mvWrap.mv-top .mv-t em{font:800 13.5px/1 var(--body)!important;font-style:normal!important;color:var(--yellow)!important;font-variant-numeric:tabular-nums;min-width:2ch;margin:0!important}
html body.solo:not(.mob) .kb-switches>#avText{order:9!important}
/* Keys only: no bottom bar at all */
body.solo.psz-keys:not(.mob) #kbTools{display:none!important}
/* Thin trims the bottom bar a little */
body.solo.psz-thin:not(.mob) #kbTools{zoom:.9}
/* Takes: just its arrow at rest; the word appears while you hover the record button (or the arrow), or it has focus or is open */
html body.solo:not(.mob) .kb-switches .rg-rec #mtBtn .rg-tk{font-size:0!important;gap:0;transition:font-size .18s ease}
html body.solo:not(.mob) .kb-switches .rg-rec #mtBtn .rg-tk svg{margin:0!important}
html body.solo:not(.mob) .kb-switches .rg-rec:is(:hover,:focus-within) #mtBtn .rg-tk,html body.solo:not(.mob) .kb-switches .rg-rec #mtBtn[aria-expanded="true"] .rg-tk{font-size:14px!important;gap:4px}
html body.solo:not(.mob) .kb-switches .rg-rec:is(:hover,:focus-within) #mtBtn .rg-tk svg,html body.solo:not(.mob) .kb-switches .rg-rec #mtBtn[aria-expanded="true"] .rg-tk svg{margin-left:4px!important}
@media (prefers-reduced-motion:reduce){html body.solo .kb-switches .rg-rec #mtBtn .rg-tk{transition:none}}
/* MIDI learn sits on the toolbar right before your MIDI button */
html body.solo:not(.mob) .kb-switches>.ml-ctl{order:199!important;margin-left:0!important}
/* when the toolbar is tight its label steps out: a small knob icon says what it is */
html body.solo.tb-fit3:not(.mob) .kb-switches>.ml-ctl #mlBtn::after{content:"";display:inline-block;width:16px;height:16px;margin-left:4px;vertical-align:middle;background:currentColor;-webkit-mask:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='13' r='7.5' fill='none' stroke='black' stroke-width='2.2'/%3E%3Cpath d='M12 13l3.6-3.6M12 2.5v2' stroke='black' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='13' r='7.5' fill='none' stroke='black' stroke-width='2.2'/%3E%3Cpath d='M12 13l3.6-3.6M12 2.5v2' stroke='black' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
.cs-toast.seat-toast.sync-offer{top:auto;left:auto;right:24px;bottom:24px;transform:none;width:min(440px,calc(100vw - 48px));gap:12px;padding:12px 12px 12px 14px;border-radius:18px;background:rgba(26,24,21,.96);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid #3a3226;color:#FBF6EC;font:700 13px/1.35 Nunito,sans-serif;animation:soIn .28s cubic-bezier(.2,.7,.2,1)}
@keyframes soIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.cs-toast.seat-toast.sync-offer{animation:none}}
.cs-toast.sync-offer button.so-use{border-radius:10px!important;height:34px;width:auto!important;padding:0 16px!important;min-width:68px;white-space:nowrap;flex:none;font:900 13px/1 Nunito,sans-serif!important}
.cs-toast.sync-offer button.so-x{border-radius:10px!important;height:34px;width:34px;font:800 17px/1 Nunito,sans-serif!important}
.sync-offer .so-ic{display:grid;place-items:center;width:36px;height:36px;flex:none;border-radius:11px;background:#2a2112;color:#F6A801}
.sync-offer .so-t{display:flex;flex-direction:column;gap:2px;flex:1 1 auto;min-width:0}
.sync-offer .so-t b{font-weight:900;font-size:13.5px;color:#FBF6EC}
.sync-offer .so-t small{font-size:12px;font-weight:700;color:#a99f8e}
body.mob .cs-toast.seat-toast.sync-offer{left:12px;right:12px;width:auto;bottom:calc(84px + env(safe-area-inset-bottom,0px))}
.sync-offer button{flex:none;height:30px;white-space:nowrap;border-radius:999px;font:800 12.5px/1 Nunito,sans-serif;cursor:pointer}
.sync-offer .so-use{padding:0 16px;min-width:72px;border:0;background:#F6A801;color:#111}
.sync-offer .so-x{width:30px;padding:0;border:1px solid #3a3630;background:transparent;color:#cfc6b4;font-size:17px}
.cs-toast.seat-toast{display:flex;align-items:center;gap:12px;width:max-content;max-width:min(520px,calc(100vw - 32px));box-sizing:border-box;padding:12px 10px 12px 18px;border-radius:16px;font-size:13.5px;line-height:1.4;white-space:normal}
.seat-toast b{font-weight:800}
.seat-toast button{flex:none;width:28px;height:28px;border-radius:50%;border:0;background:#2c2924;color:#ffc93d;font:800 16px/1 Nunito,sans-serif;cursor:pointer}
.seat-card h2{font-size:26px}
.seat-l{list-style:none;margin:0 0 18px;padding:0;text-align:left}
.seat-l li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 16px;margin:0 0 6px;border-radius:14px;background:#fff;border:1px solid #e2d8c4;font-size:14.5px}
.seat-l small{flex:none;color:#8a7f6c;font-weight:800;font-size:12.5px}
.seat-more{display:flex;justify-content:center;align-items:center;gap:10px;margin-top:12px;color:#b3a891}
.seat-x{background:none;border:0;padding:4px 2px;font:800 14px var(--body);color:#5a5348;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.seat-x:hover{color:var(--black)}
.pg-card h2{margin:0 0 8px;font-family:var(--display);font-weight:600;font-size:30px;line-height:1.1}
.pg-p{margin:0 0 18px;font-size:15.5px;line-height:1.5;color:#3a352d}
.pg-card input[type=email]{display:block;width:100%;height:50px;box-sizing:border-box;border-radius:999px;border:2px solid #e2d8c4;background:#fff;padding:0 20px;font:700 16px var(--body);color:var(--black);text-align:center}
.pg-card input[type=email]:focus{outline:none;border-color:var(--yellow)}
.pg-opt{display:flex;align-items:center;justify-content:center;gap:8px;margin:12px 0 14px;font-size:14px;font-weight:700;color:#3a352d;cursor:pointer}
.pg-opt input{width:18px;height:18px;accent-color:var(--yellow);margin:0;flex:none}
.pg-go{display:flex;width:100%;justify-content:center;align-items:center;height:52px;box-sizing:border-box;border:0;cursor:pointer;font-size:16px}
.pg-err{min-height:18px;margin:8px 0 0;font-size:13.5px;font-weight:800;color:#c0392b}
.pg-s{margin:2px 0 0;font-size:13px;color:#8a7f6c}
.pg-hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}
.pg-price{display:flex;align-items:center;justify-content:center;gap:10px;margin:2px 0 12px}
.pg-fk{margin:0 0 4px;text-align:center;font:900 11.5px/1 var(--body);letter-spacing:.22em;text-transform:uppercase;color:#b07800}
.pg-price b{font-family:var(--display);font-weight:600;font-size:26px;line-height:1;background:var(--yellow);color:var(--black);padding:6px 14px;border-radius:999px}
.pg-price span{font-size:14px;font-weight:800;color:#5b5346}
.pg-upd{font-weight:800;color:#111}
.pg-price{flex-wrap:wrap;row-gap:6px}.pg-price b,.pg-price s{white-space:nowrap}.pg-price s+b+span{flex-basis:100%;text-align:center}
.pg-price s{font:600 20px/1 var(--display);color:#8a8172;text-decoration-thickness:2px;text-decoration-color:#c0392b}
.ch1-cta .was{color:#8a8172;font-weight:700;text-decoration-thickness:2px;text-decoration-color:#c0392b;margin-right:2px}
.pg-card .pg-in{display:block;width:100%;height:50px;box-sizing:border-box;border-radius:999px;border:2px solid #e2d8c4;background:#fff;padding:0 20px;font:700 16px var(--body);color:var(--black);text-align:center;margin:0 0 12px}
.pg-card .pg-in:focus{outline:none;border-color:var(--yellow)}
.pg-pay{display:grid;gap:10px}
.pg-v[hidden]{display:none!important}
.pg-go{gap:8px}
.pg-pp{border-radius:999px;background:#fff;color:#111;border:2px solid #111!important;font:800 16px var(--body)}
.pg-pp b{color:#003087;font-style:italic;font-weight:900}.pg-pp i{color:#009cde;font-style:italic;font-weight:900}
.pg-pp:hover{background:#f3eee2}
.pg-links{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:4px 10px;margin:6px 0 10px;font-size:14px;color:#8a7f6c}
.pg-links button{background:none;border:0;padding:4px 2px;font:800 14px var(--body);color:var(--black);text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:2px;text-underline-offset:3px;cursor:pointer}
.pg-code{margin:0 auto 14px;display:inline-block;font:700 24px/1 var(--display);letter-spacing:.06em;background:#111;color:var(--yellow);padding:10px 18px;border-radius:12px;user-select:all}
.pg-sm{font-size:14px!important}
.pg-s a{color:var(--black);font-weight:800}
.pg-go:disabled{opacity:.6;cursor:wait}
body.pg-lock{overflow:hidden}
/* piano page on phones: each section is one tidy block, title + on/off on the left, knobs on the right */
@media (max-width:620px){
body.solo .rig-panel .mix-strip{display:grid!important;grid-template-columns:auto auto minmax(0,1fr);align-items:center;column-gap:12px;row-gap:12px;padding:14px 2px!important}
body.solo .rig-panel .mix-strip .ms-h,body.solo .rig-panel .mix-strip .syn-row{display:contents!important}
body.solo .rig-panel .mix-strip .ms-h>b{grid-column:1;grid-row:1}
body.solo .rig-panel .mix-strip .led-btn{grid-column:2;grid-row:1}
body.solo .rig-panel .mix-strip .ms-k{grid-column:3;grid-row:1;justify-self:end;margin:0!important;gap:14px!important;flex-wrap:nowrap!important;width:auto!important}
body.solo .rig-panel .mix-strip .pad-styles{grid-column:1/-1;grid-row:2;width:100%!important;box-sizing:border-box}
body.solo .rig-panel .mix-synth .syn-sel[aria-label="Synth wave"]{grid-column:1/-1;grid-row:2;display:flex;width:100%;box-sizing:border-box}
body.solo .rig-panel .mix-synth .syn-sel[aria-label="Synth wave"] button{flex:1 1 0}
body.solo .rig-panel .mix-synth .syn-sel[aria-label="Synth octave"]{grid-column:3;grid-row:1;justify-self:end}
body.solo .rig-panel .mix-synth .ms-k{grid-column:1/-1!important;grid-row:3!important;justify-self:stretch!important;width:100%!important;justify-content:space-between!important;gap:0!important}
body.solo .rig-panel .kb-side{margin-bottom:4px!important}
body.solo .rig-panel .mix-strip{grid-template-columns:64px auto minmax(0,1fr);padding:18px 2px!important;row-gap:16px}
body.solo .rig-panel .mix-strip .ms-k{animation:stripIn .25s ease-out}
@keyframes stripIn{from{opacity:0;transform:translateY(-4px)}}
body.solo .rig-panel{margin-bottom:4px!important;padding-bottom:4px!important}
body.solo .kb-scroll{padding-top:10px!important}
/* top switches: Note Houses + Staff, then Keys + Aa, then Learn / MIDI learn / Sustain */
body.solo .kb-switches{row-gap:5px}
body.solo #kidsTg{order:1}body.solo #staffTg{order:2}body.solo .kb-size{order:4}body.solo #namesTg{order:5;margin-left:auto}
body.solo #lnTg{order:7}body.solo #sgTg{order:8}body.solo #kmTg{order:9}body.solo #susInd{order:10;margin-left:auto}body.solo .kb-switches .ml-ctl{order:11}
body.solo .kb-switches::before,body.solo .kb-switches::after{content:"";flex:0 0 100%;height:0}
body.solo .kb-switches::before{order:3}body.solo .kb-switches::after{order:6}
body.solo .kb-switches .kb-size{flex:0 0 auto!important;width:auto!important}
body.solo .kb-size .ks-l{font-size:0;gap:0}body.solo .kb-size .ks-l svg{width:18px;height:18px}
body.solo .rig-panel .mix-head{display:none!important}
/* more breathing room */
body.solo .rig-panel .mix-strip{padding:20px 4px!important;row-gap:16px!important}
body.solo .rig-panel .kb-side{margin-bottom:12px!important}
body.solo .rig-panel .mix-strip .ms-k{gap:22px!important}
}
@media (max-width:370px){body.solo .kb-switches{column-gap:6px}body.solo #lnTg,body.solo #susInd,body.solo .kb-switches .ml-btn{padding-left:9px!important;padding-right:10px!important;font-size:13px}}
@media (max-width:360px){
body.solo .rig-panel .mix-synth .knob,body.solo .rig-panel .mix-synth .knob svg{width:44px!important;height:44px!important}
body.solo .rig-panel .mix-synth .knob::before{inset:8px!important}
body.solo .rig-panel .mix-synth .k-lab{font-size:8.5px!important;letter-spacing:.04em!important}
}
/* ---------- Key light (piano page) ---------- */
.kl-wrap{display:none}
body.solo .kl-wrap{display:block;position:relative;margin-left:auto}
html:not(.ffo-keylight:where(:not(.fft-keylight))) body.solo .kl-wrap:not(.kl-moved)+.rig-plate{margin-left:14px}
.kl-btn{display:inline-flex;align-items:center;gap:9px;height:44px;padding:0 16px 0 12px;border-radius:999px;border:1px solid #3a3630;background:#262420;color:var(--cream);font:800 14px var(--body);cursor:pointer;box-sizing:border-box}
.kl-btn:hover,.kl-btn.open{border-color:var(--kl,var(--yellow))}
.kl-dot{width:18px;height:18px;border-radius:50%;background:var(--kl,#F6A801);box-shadow:0 0 10px var(--kl,#F6A801),inset 0 0 0 2px rgba(0,0,0,.25)}
.kl-pop{position:absolute;right:0;bottom:calc(100% + 10px);z-index:30;width:300px;box-sizing:border-box;padding:16px;border-radius:18px;background:#1d1b18;border:1px solid #3a3630;box-shadow:0 18px 50px rgba(0,0,0,.6);color:var(--cream)}
.kl-pop[hidden]{display:none}
body.solo .kl-pop.kl-inline{position:static;width:auto;z-index:auto;box-shadow:none;background:#11100e;border:1px solid #2e2b26;border-radius:14px;padding:12px 14px}
body.solo .kl-pop.kl-inline .kl-h{margin-bottom:4px}
/* Look > Keys: four groups */
body.solo .kl-pop.kl-inline.kbx{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;background:none;border:0;padding:0}
body.solo .kl-pop.kl-inline.kbx>.kl-h{display:none}
body.solo .kbx .klg{min-width:0;box-sizing:border-box;padding:12px 14px 14px;border-radius:14px;background:#11100e;border:1px solid #2e2b26;display:flex;flex-direction:column}
body.solo .kbx .klg:nth-of-type(2){grid-row:span 2}
body.solo .kbx .klg>header{display:flex;flex-direction:column;gap:2px;margin-bottom:2px}
body.solo .kbx .klg>header b{font:700 16px/1.2 Fredoka,var(--display),sans-serif;color:var(--kl,#F6A801)}
body.solo .kbx .klg>header span{font:600 12px/1.35 var(--body);color:#8a8273}
body.solo .kbx .klg .kl-l{margin:12px 0 6px}
body.solo .kbx .klg .adv-row{display:flex;flex-direction:column;align-items:stretch;gap:8px;margin:12px 0 0;padding:12px 0 0;border:0;border-top:1px solid #2a2723;background:none;border-radius:0;box-shadow:none}
body.solo .kbx .klg .adv-row .adv-l h3{font:900 11px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:#a9a091;margin:0 0 4px}
body.solo .kbx .klg .adv-row .adv-l p{font-size:12px;margin:0;color:#8a8273}
body.solo .kbx .klg .adv-row .adv-seg{width:100%}
body.solo .kbx .klg>.kl-l:first-of-type,body.solo .kbx .klg>header+.adv-row{margin-top:8px;border-top:0;padding-top:0}
@media (max-width:700px){body.solo .kl-pop.kl-inline.kbx{grid-template-columns:minmax(0,1fr)}body.solo .kbx .klg:nth-of-type(2){grid-row:auto}}
body.solo .kl-pop.kl-inline .kl-h b{font-size:17px}
body.solo .kl-pop.kl-inline{min-width:0;max-width:100%}body.solo .kl-pop.kl-inline .kl-sw{grid-template-columns:repeat(8,minmax(0,1fr));gap:8px;max-width:360px}
body.solo .kl-wrap.kl-moved{display:none!important}
html.ffo-keylight:where(:not(.fft-keylight)) .kl-pop.kl-inline{display:none!important}
.kl-h{display:flex;flex-direction:column;gap:2px;margin-bottom:12px}
body.solo #eqPop,body.solo .kl-pop:not(.kl-inline){z-index:60}
.kl-pop>.kl-h{position:relative;padding-right:40px}
.kl-pop>.kl-h>.kp-x{position:absolute;right:-4px;top:-4px;width:32px;height:32px;border-radius:50%;border:1px solid #3a3630;background:#1d1b18;color:#cfc6b4;font:700 18px/1 var(--body);cursor:pointer;display:grid;place-items:center}
.kl-pop>.kl-h>.kp-x:hover{color:#FBF6EC;border-color:var(--yellow,#F6A801)}
.kl-pop.kl-inline>.kl-h>.kp-x,.kla-b .kp-x{display:none}
#eqPk:empty,#eqgPk:empty{display:none}
.kl-h b{font-family:var(--display);font-weight:600;font-size:18px}.kl-h span{color:#a9a091;font-weight:700;font-size:12.5px}
.kl-l{color:#a9a091;font-weight:900;font-size:11px;letter-spacing:.12em;text-transform:uppercase;margin:12px 0 7px}.kl-l small{text-transform:none;letter-spacing:0;font-weight:700}
.kl-sw{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px}
.kl-sw button,.kl-custom{position:relative;aspect-ratio:1;border-radius:50%;border:0;padding:0;cursor:pointer;background:var(--c);box-shadow:inset 0 0 0 2px rgba(0,0,0,.3)}
.kl-sw button[aria-checked="true"],.kl-custom.on{box-shadow:0 0 0 2px #1d1b18,0 0 0 4px var(--cream)}
.kl-custom{display:grid;place-items:center;background:conic-gradient(#ff4d4d,#ffd23d,#2ee6b6,#3da5ff,#a970ff,#ff4d8d,#ff4d4d)}
.kl-custom span{width:18px;height:18px;border-radius:50%;background:#1d1b18;color:var(--cream);font-weight:900;font-size:14px;line-height:18px;text-align:center}
.kl-custom input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;border:0;padding:0}
.kl-seg{display:flex!important;width:100%;box-sizing:border-box}.kl-seg button{flex:1 1 0}
/* Hands: left/right colour swatches + split-point stepper, shown only in Hands mode (switch: handsplit) */
.kl-hs-row{display:none;align-items:center;justify-content:space-between;gap:10px;margin-top:8px}
.kl-pop.kl-hands .kl-hs-row{display:flex}
.kl-hs-sw{display:flex;align-items:center;gap:6px;cursor:pointer;color:#a9a091;font-weight:800;font-size:12px}
.kl-hs-sw input{width:26px;height:26px;border-radius:50%;border:0;padding:0;cursor:pointer;flex:none}
.kl-hs-split{display:flex;align-items:center;gap:8px;color:var(--cream);font-weight:900;font-size:13px}
.kl-hs-split .rs-b{width:24px;height:24px;border-radius:50%;border:1px solid #3d3830;background:#15140f;color:#c9bfae;cursor:pointer;font-size:14px;line-height:1}
.kl-hs-split .rs-b:hover{color:var(--yellow);border-color:#6b5320}
.kl-pop.kl-hands .kl-hs-row.kl-hs2{display:grid;gap:10px;justify-content:stretch}
.kl-hh{display:flex;align-items:center;gap:10px;min-width:0}.kl-hh-l{flex:none;width:76px;font:800 12px/1 var(--body);color:#a9a091}
.kl-hh-sw{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.kl-hh-sw [data-hc]{width:24px;height:24px;border-radius:50%;border:0;padding:0;cursor:pointer;background:var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.35)}
.kl-hh-sw [data-hc][aria-checked="true"]{box-shadow:0 0 0 2px #1d1b18,0 0 0 4px var(--c)}
.kl-hh-c{position:relative;width:24px;height:24px;border-radius:50%;cursor:pointer;background:conic-gradient(#ff4d4d,#ffd24d,#4dff88,#4dc3ff,#a14dff,#ff4d4d);box-shadow:inset 0 0 0 1px rgba(0,0,0,.35)}
.kl-hh-c input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;border:0;padding:0}
/* the split arrows are true circles */
.kl-hs-split .rs-b{width:28px!important;height:28px!important;min-width:28px!important;max-width:28px!important;padding:0!important;display:inline-grid!important;place-items:center;border-radius:50%!important;aspect-ratio:1;flex:none;box-sizing:border-box}
.kl-l.kl-sl-opt small{color:#a9a091;text-transform:none;letter-spacing:0;font-weight:700;margin-left:4px}
.kl-sl-row{display:flex;align-items:center;gap:10px}
.kl-sl-row select{flex:1 1 0;min-width:0;height:28px;border-radius:7px;border:1px solid #3a3630;background:#181715;color:var(--cream);font-family:var(--body);font-weight:700;font-size:12.5px;padding:0 8px}
@media (max-width:620px){body.solo .kl-wrap{order:5;margin-left:0}.kl-pop{position:fixed;left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));width:auto}}
/* the lit keys */
body.solo{--kl:#F6A801;--kl-ink:#111}
body.solo #kb .kw.on{background:var(--kl);color:var(--kl-ink)}
/* Connect: a thin outline shows a key someone else just pressed, never mixed up with your own key light (switch: connect) */
body.solo #kb .kw.cx-on,body.solo #kb .kb-black.cx-on{box-shadow:inset 0 0 0 3px #2EE6B6,inset 0 -40px 30px -12px rgba(46,230,182,.55),0 0 14px rgba(46,230,182,.45);transition:box-shadow .08s}
body.solo #kb .kb-black.on{background:color-mix(in srgb,var(--kl) 80%,#000);box-shadow:inset 0 -3px 0 color-mix(in srgb,var(--kl) 50%,#000)}
body.solo.kl-glow #kb .kw.on,body.solo.kl-shimmer #kb .kw.on{z-index:1;box-shadow:0 16px 22px -4px color-mix(in srgb,var(--kl) 80%,transparent),inset 0 -14px 22px rgba(255,255,255,.35),inset 0 0 0 1px color-mix(in srgb,var(--kl) 60%,#000)}
body.solo.kl-glow #kb .kb-black.on,body.solo.kl-shimmer #kb .kb-black.on{box-shadow:0 14px 20px -4px color-mix(in srgb,var(--kl) 85%,transparent),inset 0 -10px 14px rgba(255,255,255,.3)}
/* afterglow: keys fade out instead of switching off */
body.solo.kl-glow #kb .kw,body.solo.kl-glow #kb .kb-black,body.solo.kl-shimmer #kb .kw,body.solo.kl-shimmer #kb .kb-black{transition:background-color .55s ease-out,box-shadow .55s ease-out}
body.solo.kl-glow #kb .on,body.solo.kl-shimmer #kb .on{transition:none}
body.solo.kl-shimmer #kb .on::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.85) 48%,transparent 66%);background-size:260% 100%;animation:klSweep .9s ease-out forwards}
@keyframes klSweep{from{background-position:120% 0}to{background-position:-60% 0}}
/* note names only on pressed keys */
body.solo.names-press #kb .kn{visibility:hidden}
body.solo.names-press #kb .on::after{content:attr(data-n);position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:3;width:auto;height:auto;min-width:26px;padding:4px 7px;box-sizing:border-box;border-radius:8px;background:var(--kl);color:var(--kl-ink,#111);font:700 16px/1 var(--display);letter-spacing:.01em;text-align:center;white-space:nowrap;box-shadow:0 0 0 2px #111,0 4px 10px rgba(0,0,0,.35);-webkit-font-smoothing:antialiased;animation:knPop .16s ease-out;visibility:visible}
body.solo.names-press #kb .kb-black.on::after{bottom:10px;font-size:13px;min-width:20px;padding:3px 5px;border-radius:6px}
body.solo.names-press .kb.many .kw.on::after{font-size:13px;min-width:20px;padding:3px 4px;bottom:10px;border-radius:6px}
body.solo.names-press .kb.many .kb-black.on::after{font-size:11px;min-width:18px;padding:2px 3px}
@keyframes knPop{from{transform:translateX(-50%) scale(.6);opacity:0}}
/* note names off: clean keys (middle C keeps a small yellow dot so you never get lost) */
body.names-off #kb .kn{visibility:hidden}
/* note names as numbers in the key (2026-10-27): every key, black ones too; the 1s are lit */
body.solo:not(.names-num) #kb .kb-black>.kn{display:none}
body.solo.names-num #kb .kb-black>.kn{position:absolute;left:50%;bottom:9px;transform:translateX(-50%);font:800 10.5px/1 var(--body);color:#e8e0cf;white-space:nowrap;pointer-events:none;z-index:2}
body.solo.names-num .kb .kw.mid .kn{background:none;color:inherit;padding:0}
body.solo.names-num #kb .kw.root>.kn{color:#111;background:var(--kl,#F6A801);border-radius:6px;padding:1px 5px}
body.solo.names-num #kb .kb-black.root>.kn{color:var(--kl,#F6A801)}
body.solo.names-num.lbl-clean #kb .kw>.kn{font-weight:800}
/* (2026-10-29) labels that stay readable on a shared or recorded screen: heavier type, a solid dark edge, no thin strokes */
body.solo.names-press #kb .on::after{font-weight:800;box-shadow:0 0 0 2.5px #111,0 4px 10px rgba(0,0,0,.4);text-rendering:geometricPrecision}
body.solo.names-num #kb .kb-black>.kn{font-size:12px}
/* Both: the letter with its number under it */
body.solo.names-both #kb .kn{display:inline-flex;flex-direction:column;align-items:center;gap:2px;line-height:1}
body.solo.names-both #kb .kn .kn-d{font-size:.78em;opacity:.85;font-weight:800}
body.solo.names-both #kb .kw.root>.kn{padding:2px 5px}
body.solo.names-both #kb .kw.root>.kn .kn-d{opacity:1}
body.solo.names-both #kb .kb-black>.kn{display:flex}
body.solo.names-both.names-press #kb .on[data-d]::after{content:attr(data-n) "\A" attr(data-d);white-space:pre;line-height:1.08;padding:5px 7px}
/* Large labels (Keys › Large labels) */
body.solo.names-big #kb .kw>.kn{font-size:17px;font-weight:800}
body.solo.names-big:not(.keys-black) #kb .kw:not(.root):not(.on)>.kn{color:#3d372e}
body.solo.names-big #kb .kb-black:not(.root)>.kn{color:#fff}
body.solo.names-big #kb .kb-black>.kn{font-size:14px;bottom:10px}
body.solo.names-big.names-press #kb .on::after{font-size:24px;min-width:34px;padding:6px 9px;border-radius:10px;bottom:16px;box-shadow:0 0 0 3px #111,0 5px 12px rgba(0,0,0,.45)}
body.solo.names-big.names-press #kb .kb-black.on::after{font-size:18px;min-width:26px;padding:4px 6px;bottom:12px}
body.solo.names-big.names-press .kb.many .kw.on::after{font-size:17px;min-width:24px;padding:4px 5px}
body.solo.names-big.names-press .kb.many .kb-black.on::after{font-size:14px;min-width:20px;padding:3px 4px}
/* piano page: compact, so the whole instrument fits one screen when sharing */
body.solo .hero{padding:96px 0 28px;min-height:100vh}
/* wide instrument (set from its width, so it also follows drag-resizing) */
/* wide windows: the three sections share the panel's width, each centred in its own bay */
body.solo.np-wide .rig-panel .mix-strip{flex:1 1 0!important;align-items:flex-start}
body.solo.np-wide .rig-panel .mix-synth{flex:1.6 1 0!important}
body.solo .kb-hint>div:first-child>strong,body.solo .kb-hint>div:first-child>br,body.solo #kbHelp{display:none}
body.solo .kb-switches{margin-top:0}
body.solo .kb-switches .ml-ctl{margin-left:auto}
body.solo .kb-switches .ml-btn{height:28px}
body.solo .kb-wrap{padding:16px 40px 18px}
body.solo .kb-wrap>.kb-hint{margin-bottom:10px}
body.solo .rig-panel{padding:10px 0 12px;margin-bottom:10px}
body.solo .rig-panel .mix-strip{gap:8px;padding:2px 16px}
body.solo .rig-panel .knob,body.solo .rig-panel .knob svg{width:60px;height:60px}
body.solo .rig-panel .knob::before{inset:11px}
body.solo .rig-panel .kb-side{width:280px!important;flex-basis:280px!important}
body.solo .rig-brand{padding:4px 16px 4px 4px;font-size:20px}
body.solo .kb-scroll{padding-top:28px}
body.solo.kids-off .kb-scroll{padding-top:6px}
body.solo .kb{height:210px}
body.solo .kb-tools{margin-top:12px;margin-bottom:6px}
body.solo .solo-made{margin-top:12px}
@media (min-width:1241px){
/* one tidy row: display | piano | pad | synth | midi learn */
body.solo .rig-panel{flex-wrap:nowrap}
body.solo .rig-panel .mix{flex-wrap:nowrap}
body.solo .rig-panel .mix-strip{flex:0 0 auto}
body.solo .rig-panel .mix-synth{flex:1 1 auto;min-width:0}
body.solo .rig-panel .mix-head{display:none}
body.solo .rig-brand{display:none}
body.solo .rig-panel .ms-h .pad-styles{flex-basis:100%}
body.solo .rig-panel .syn-row{flex-wrap:nowrap}
}
/* tight instrument */
body.solo.np-tight .rig-panel .kb-side{width:236px!important;flex-basis:236px!important;margin-right:10px}
body.solo.np-tight .rig-panel .kb-side .midi-btn,body.solo.np-tight .rig-panel .kb-side .listen-btn{padding:0 8px!important;font-size:13px}
body.solo.np-tight .rig-panel .mix-strip{padding:2px 12px}
body.solo.np-tight .rig-panel .ms-k{gap:8px}
body.solo.np-tight .rig-panel .knob,body.solo.np-tight .rig-panel .knob svg{width:54px;height:54px}
body.solo.np-tight .rig-panel .knob::before{inset:10px}
body.solo.np-tight .rig-panel .k-lab{font-size:9.5px;letter-spacing:.1em}
body.solo.np-tight .rig-panel .syn-sel button{padding:0 7px}
@media (max-width:620px){body.solo .rig-panel .mix-synth .knob,body.solo .rig-panel .mix-synth .knob svg{width:50px;height:50px}body.solo .rig-panel .mix-synth .knob::before{inset:9px}body.solo .rig-panel .mix-synth .k-lab{font-size:9px;letter-spacing:.04em}body.solo .rig-panel .mix-synth .ms-k{gap:2px}body.solo .kb{height:200px}body.solo .kb-wrap{padding:14px 12px 16px}body.solo .kb-switches .ml-ctl{margin-left:0}}
/* piano page polish: maker's plate, knobs on one line */
.rig-plate{display:none}
body.solo .rig-plate{display:flex;align-items:center;margin-left:auto;height:44px;padding:0 4px;opacity:.95;text-decoration:none}
body.solo .rig-plate img{display:block;height:36px;width:auto}
body.solo .ch1-plate .ch1-badge{display:block;width:54px;height:54px;overflow:visible;filter:drop-shadow(0 4px 6px rgba(0,0,0,.6)) drop-shadow(0 1px 1.5px rgba(0,0,0,.7));transform-origin:50% 60%;transition:transform .45s cubic-bezier(.2,.9,.25,1.15),filter .45s ease}
body.solo .ch1-plate{height:54px;cursor:pointer;border-radius:14px}
body.solo .ch1-plate:hover .ch1-badge,body.solo .ch1-plate[aria-expanded="true"] .ch1-badge{transform:scale(1.1) translateY(-2px);filter:drop-shadow(0 9px 12px rgba(0,0,0,.6)) drop-shadow(0 2px 3px rgba(0,0,0,.6)) drop-shadow(0 0 10px rgba(246,168,1,.18))}
body.solo .ch1-plate:active .ch1-badge{transform:scale(1.04);transition-duration:.12s}
body.solo .ch1-plate:focus-visible{outline:2px solid var(--kl,#F6A801);outline-offset:3px}
@media (prefers-reduced-motion:reduce){body.solo .ch1-plate .ch1-badge{transition:none}}
.ch1-who{position:fixed;z-index:9000;box-sizing:border-box;padding:16px;border-radius:16px;background:#1d1b18;border:1px solid #3a3630;box-shadow:0 18px 40px rgba(0,0,0,.6);color:#FBF6EC;font:600 13px/1.4 Nunito,system-ui,sans-serif;display:flex;flex-direction:column;gap:10px;animation:cwIn .22s cubic-bezier(.2,.9,.3,1)}
@keyframes cwIn{from{opacity:0;transform:translateY(6px) scale(.98)}}
.ch1-who[hidden]{display:none!important}
.ch1-who .cw-h{font:800 10.5px/1 Nunito,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#a99f8e}
/* ---- My playing (switch: myplay): the line in the profile card and its own card ---- */
html.ffo-myplay:where(:not(.fft-myplay)) .cw-mp,html.ffo-myplay:where(:not(.fft-myplay)) .mp-card{display:none!important}
.ch1-who .cw-mp{display:flex;align-items:center;gap:10px;width:100%;box-sizing:border-box;padding:10px 12px;border-radius:12px;border:1px solid #3a3630;background:linear-gradient(180deg,#24211c,#1a1815);color:#FBF6EC;font:700 13px/1.25 Nunito,sans-serif;text-align:left;cursor:pointer}
.ch1-who .cw-mp:hover{border-color:#5a4a20}.ch1-who .cw-mp:focus-visible{outline:2px solid #F6A801;outline-offset:2px}
.ch1-who .cw-mp .mpf{flex:none;font-size:20px;line-height:1}
.ch1-who .cw-mp .mpt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.ch1-who .cw-mp .mpt b{font:800 13.5px/1.2 Nunito,sans-serif}.ch1-who .cw-mp .mpt small{font:700 11.5px/1.2 Nunito,sans-serif;color:#a99f8e}
.ch1-who .cw-mp .mpg{flex:none;color:#F6A801;font-size:18px;line-height:1}
.mp-card{position:fixed;z-index:9550;left:50%;top:50%;transform:translate(-50%,-48%) scale(.98);opacity:0;pointer-events:none;width:min(420px,calc(100vw - 24px));max-height:calc(100vh - 24px);overflow-y:auto;box-sizing:border-box;padding:18px 18px 16px;border-radius:20px;background:linear-gradient(180deg,#24211c,#161412);border:1px solid #3a3630;border-top:3px solid var(--kl,#F6A801);box-shadow:0 30px 80px rgba(0,0,0,.65);color:#FBF6EC;font-family:Nunito,sans-serif;transition:opacity .2s,transform .25s cubic-bezier(.2,.9,.3,1.1)}
.mp-card.on{opacity:1;transform:translate(-50%,-50%);pointer-events:auto}
.mp-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.mp-h small{font:900 10.5px/1 Nunito,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#a99f8e}
.mp-x{width:28px;height:28px;border:0;border-radius:50%;background:#2a2824;color:#cfc6b4;font-size:18px;line-height:1;cursor:pointer}.mp-x:hover{color:#FBF6EC}.mp-x:focus{outline:none}.mp-x:focus-visible{outline:2px solid #F6A801;outline-offset:2px}
.mp-hero{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:16px;background:radial-gradient(120% 140% at 0 0,#3a2805 0,#1f1709 60%,#171410 100%);box-shadow:inset 0 0 0 1px #4a360a}
.mp-fl{flex:none;font-size:38px;line-height:1;filter:drop-shadow(0 0 10px rgba(246,168,1,.45))}.mp-hero.cold .mp-fl{filter:grayscale(1) opacity(.5)}
.mp-sn{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}.mp-sn b{font:900 30px/1 Nunito,sans-serif;color:#F6A801;font-variant-numeric:tabular-nums}.mp-sn b span{font:800 15px/1 Nunito,sans-serif;color:#FBF6EC;margin-left:6px}
.mp-sn small{font:700 12.5px/1.3 Nunito,sans-serif;color:#cfc6b4}
.mp-best{flex:none;text-align:right;font:800 11px/1.2 Nunito,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#a99f8e}.mp-best b{display:block;font:900 20px/1 Nunito,sans-serif;letter-spacing:0;color:#FBF6EC;margin-top:4px}
.mp-sec{margin:16px 0 8px;font:900 10.5px/1 Nunito,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#a99f8e}
.mp-wk{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.mp-d{display:flex;flex-direction:column;align-items:center;gap:6px;font:800 11px/1 Nunito,sans-serif;color:#8a8170}
.mp-d i{position:relative;width:30px;height:30px;border-radius:50%;box-sizing:border-box;border:1.5px solid #3a3630;background:#121110}
.mp-d.on i{background:#F6A801;border-color:#F6A801;box-shadow:0 0 12px rgba(246,168,1,.35)}
.mp-d.two i::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1.5px solid rgba(246,168,1,.55)}
.mp-d.now{color:#FBF6EC}.mp-d.now:not(.on) i{border-color:#F6A801;border-style:dashed}
.mp-d.fut i{opacity:.35}
.mp-key{display:flex;gap:14px;margin-top:10px;font:700 11.5px/1 Nunito,sans-serif;color:#8a8170}.mp-key span{display:inline-flex;align-items:center;gap:6px}
.mp-key i{width:10px;height:10px;border-radius:50%;background:#F6A801}.mp-key i.t{background:none;border:1.5px solid rgba(246,168,1,.7);width:8px;height:8px}
.mp-nums{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.mp-n{padding:12px 10px;border-radius:14px;background:#121110;border:1px solid #2c2a26;text-align:center}
.mp-n b{display:block;font:900 22px/1 Nunito,sans-serif;color:#FBF6EC;font-variant-numeric:tabular-nums}.mp-n small{display:block;margin-top:6px;font:700 11.5px/1.25 Nunito,sans-serif;color:#a99f8e}
.mp-ch{display:flex;flex-direction:column;gap:7px}
.mp-c{display:grid;grid-template-columns:64px 1fr 34px;align-items:center;gap:10px}
.mp-c b{font:400 24px/1 'VT323',monospace;color:#ffc93d;text-shadow:0 0 6px rgba(255,190,60,.3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mp-c b small{font-size:15px;color:#c99a2e;margin-left:4px}
.mp-c span{height:8px;border-radius:999px;background:#2a2824;overflow:hidden}.mp-c span i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#c98a12,#F6A801)}
.mp-c em{font:800 12px/1 Nunito,sans-serif;font-style:normal;color:#a99f8e;text-align:right;font-variant-numeric:tabular-nums}
.mp-none{padding:12px;border-radius:12px;background:#121110;border:1px dashed #3a3630;font:700 13px/1.4 Nunito,sans-serif;color:#a99f8e;text-align:center}
.mp-line{margin:16px 0 0;padding:12px 14px;border-radius:14px;background:#2a1d04;border:1px solid #5a400a;font:700 13.5px/1.4 Nunito,sans-serif;color:#ffe2a0}
.mp-sig{margin:10px 2px 0;font:600 11.5px/1.4 Nunito,sans-serif;color:#6f675b}
@media (prefers-reduced-motion:reduce){.mp-card{transition:none}}
.ch1-who .cw-id{display:flex;align-items:center;gap:10px;min-width:0}
.ch1-who .cw-av{flex:none;width:36px;height:36px;border-radius:50%;background:#F6A801;color:#111;display:flex;align-items:center;justify-content:center;font:900 16px/1 Nunito,sans-serif}
.ch1-who .cw-t{display:flex;flex-direction:column;min-width:0;flex:1}
.ch1-who .cw-n{font:800 14.5px/1.25 Nunito,sans-serif;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ch1-who .cw-v{color:#cfc6b4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums}
.ch1-who .cw-eye{flex:none;height:28px;padding:0 10px;border-radius:999px;border:1px solid #3a3630;background:transparent;color:#cfc6b4;font:800 11.5px/1 Nunito,sans-serif;cursor:pointer}
.ch1-who .cw-role{align-self:flex-start;padding:4px 9px;border-radius:999px;background:#2a1d04;border:1px solid #5a400a;color:#ffc93d;font:800 11px/1 Nunito,sans-serif}
.ch1-who .cw-f{display:flex;flex-direction:column;gap:6px;margin:2px 0 0;padding-top:10px;border-top:1px solid #2e2b26}
.ch1-who .cw-f label{font:700 12px/1.3 Nunito,sans-serif;color:#a99f8e}
.ch1-who .cw-row{display:flex;gap:6px}
.ch1-who .cw-row input{flex:1;min-width:0;height:36px;box-sizing:border-box;padding:0 12px;border-radius:10px;border:1px solid #3a3630;background:#141311;color:#FBF6EC;font:700 13.5px/1 Nunito,sans-serif}
.ch1-who .cw-row input:focus{outline:none;border-color:#F6A801}
.ch1-who .cw-row button{flex:none;height:36px;padding:0 14px;border-radius:10px;border:0;background:#F6A801;color:#111;font:800 13px/1 Nunito,sans-serif;cursor:pointer}
.ch1-who .cw-row button:disabled{opacity:.6}
.ch1-who .cw-err{margin:0;min-height:0;color:#ff9b7a;font-size:12px}
.ch1-who .cw-err:empty{display:none}
.ch1-who .cw-pw{align-self:flex-start;padding:0;border:0;background:none;color:#F6A801;font:700 12px/1 Nunito,sans-serif;text-decoration:underline;cursor:pointer}.ch1-who .cw-pw[hidden]{display:none}
.ch1-who .cw-out{align-self:flex-start;padding:0;border:0;background:none;color:#a99f8e;font:700 12px/1 Nunito,sans-serif;text-decoration:underline;cursor:pointer}
.ch1-who button:focus-visible,.ch1-who input:focus-visible{outline:2px solid #F6A801;outline-offset:2px}
body.solo .ch1-plate .ch1-lock{display:none!important}
body.solo.cs-yellow:not([class*="th-"]) .rig-plate.ch1-plate{filter:none;opacity:1}
body.solo .rig-plate.ch1-plate{padding:0;opacity:1}
.rig-brand{display:none!important}
body.solo .solo-made{display:none!important}
@media (min-width:621px){
body.solo .rig-panel .mix{align-items:stretch}
body.solo .rig-panel .mix-strip{justify-content:flex-start}
body.solo .rig-panel .ms-k{margin-top:auto}
}
@media (max-width:620px){body.solo .rig-plate{order:6;flex-basis:100%;justify-content:center;margin:6px 0 0}body.solo .rig-plate img{height:30px}}
@media (min-width:1000px){
/* no open Synth panel to soak up the spare room (switched off or folded): the open panels share the row instead of leaving an empty band */
html.ffo-synth:where(:not(.fft-synth)) body.solo .rig-panel .mix>.mix-strip:not(.ms-col):not(.ms-sized),body.solo .rig-panel .mix:not(:has(>.mix-synth:not(.ms-col):not(.ms-gone)))>.mix-strip:not(.ms-col):not(.ms-sized){flex:1 1 auto;min-width:0}
}
@media (min-width:1000px) and (max-width:1240px){
/* landscape tablets: chord display on top, then all three sections and their knobs in one line */
body.solo .rig-panel .mix{flex-wrap:nowrap}
body.solo .rig-panel .mix-strip{flex:0 0 auto}
body.solo .rig-panel .mix-synth{flex:1 1 auto;min-width:0}
body.solo .rig-panel .mix-head{display:none}
body.solo .rig-panel .ms-h .pad-styles{flex-basis:100%}
body.solo .rig-panel .syn-row{flex-wrap:nowrap}
body.solo .rig-panel .ms-k{gap:8px}
body.solo .rig-panel .knob,body.solo .rig-panel .knob svg{width:56px;height:56px}
body.solo .rig-panel .knob::before{inset:10px}
body.solo .rig-panel .mix-strip{padding:2px 14px}
body.solo .rig-panel .syn-sel button{padding:0 7px}
}
@media (max-width:999px) and (min-width:621px){body.solo .rig-panel .mix-head{display:none}}
@media (min-width:1000px){
/* Grand / E-piano and the 5 synth waves: compact so all three sections stay on one line */
body.solo .rig-panel .mix-strip:has(.pno-type) .ms-h{display:grid!important;grid-template-columns:max-content 1fr;justify-items:start;row-gap:10px;column-gap:12px}
body.solo .rig-panel .ms-h .pno-type{grid-column:1/-1;width:100%!important;justify-content:space-between}
body.solo .rig-panel .ms-h .pno-type button{flex:1 1 0;padding:0 7px!important}
body.solo .rig-panel .pad-styles button{white-space:nowrap}
/* synth: octave sits on the title row, waves get their own row */
body.solo .rig-panel .mix-synth .ms-h{display:grid!important;grid-template-columns:max-content max-content 1fr;justify-items:start;align-items:center;row-gap:10px;column-gap:12px}
body.solo .rig-panel .mix-synth .syn-row{display:contents}
body.solo .rig-panel .mix-synth .syn-sel[aria-label="Synth wave"]{grid-column:1/-1;grid-row:2;justify-self:start}
body.solo .rig-panel .mix-synth .syn-sel[aria-label="Synth octave"]{grid-column:3;grid-row:1;justify-self:end}
}
@media (min-width:1000px) and (max-width:1240px){
body.solo .rig-panel .syn-sel button{padding:0 5px;letter-spacing:.02em}
body.solo .rig-panel .pad-styles button{padding:0 9px!important;letter-spacing:.04em}
body.solo .rig-panel .syn-sel button{padding:0 7px;letter-spacing:.04em}
}
@media (max-width:1240px){body.solo .rig-panel .kb-side{width:100%!important;flex-basis:100%!important;margin:0 0 14px!important}}
@media (max-width:620px){body.solo .rig-panel .mix-synth .ms-k{width:100%;justify-content:space-between}body.solo .rig-panel .mix-synth .kn-wrap{min-width:0;width:auto}}
/* piano page: piano, pad and synth as separate modules with a little depth */
body.solo .rig-panel .mix{gap:8px!important}
body.solo .rig-panel .mix-strip{border:1px solid #34302a!important;border-radius:14px!important;padding:12px 14px!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.06),inset 0 -1px 0 rgba(0,0,0,.4),0 8px 18px rgba(0,0,0,.35)!important;background:linear-gradient(180deg,#26231e,#1c1a16)!important;transition:border-color .2s,box-shadow .2s}
body.solo .rig-panel .mix-strip:has(#ledPad){background:linear-gradient(180deg,#24221f,#1b1a17)!important}
body.solo .rig-panel .mix-synth{background:linear-gradient(180deg,#22211f,#1a1917)!important}
body.solo .rig-panel .mix-strip:has(.led-btn[aria-pressed="true"]){border-color:#4d3c1a!important;box-shadow:inset 0 1px 0 rgba(246,168,1,.28),inset 0 -1px 0 rgba(0,0,0,.4),0 8px 18px rgba(0,0,0,.35)!important}
@media (min-width:1000px){body.solo .rig-panel .mix-strip:has(#ledPad) .pad-styles button{padding:0 7px!important}body.solo .rig-panel .mix-synth .ms-k{gap:10px!important}}
@media (min-width:1000px) and (max-width:1240px){body.solo .rig-panel .mix-synth .ms-k{gap:5px!important}body.solo .rig-panel .ms-h .pno-type button{padding:0 6px!important}}
/* a sound that is switched off still shows all its controls (dimmed a little), so you can pick a kit, a style or a setting before you turn it on */
body.solo .rig-panel .mix-strip:has(.ms-h .led-btn[aria-pressed="false"]) :is(.ms-k,.pad-styles,.syn-sel,.dr-body,.dr-kits,.dr-kitdd){opacity:.62;transition:opacity .2s}
body.solo .rig-panel .mix-strip:has(.ms-h .led-btn[aria-pressed="false"]) :is(.ms-k,.pad-styles,.syn-sel,.dr-body,.dr-kits,.dr-kitdd):hover{opacity:.9}
/* an open sound menu is never see-through, even on a panel that is off (its dimming would show the knobs and keys behind it) */
body.solo .rig-panel .mix-strip .pad-styles:has(>.ep-pop:not([hidden])){opacity:1!important}
body.solo .rig-panel .mix>.mix-strip:has(.ep-pop:not([hidden])){z-index:30}
@media (max-width:620px){
body.solo .rig-panel .mix{gap:10px!important}
body.solo .rig-panel .mix-strip{padding:12px 12px!important;border-top:1px solid #34302a!important}
body.solo .rig-panel .mix-strip:has(.led-btn[aria-pressed]){padding:12px!important}
body.solo .rig-panel .mix-strip:has(.led-btn[aria-pressed="true"]){border-top-color:#4d3c1a!important}
}
/* E-piano menu */
.pno-type{position:relative}
.pno-type [data-fam]{display:inline-flex;align-items:center;justify-content:center;gap:4px}
.pno-type [data-fam] svg{flex:none;transition:transform .15s}.pno-type [data-fam][aria-expanded="true"] svg{transform:rotate(180deg)}
.ep-pop{position:absolute;left:0;top:calc(100% + 8px);z-index:40;width:270px;box-sizing:border-box;padding:8px;border-radius:14px;background:#1d1b18;border:1px solid #3a3630;box-shadow:0 18px 44px rgba(0,0,0,.6);display:flex;flex-direction:column;gap:4px;text-transform:none;letter-spacing:0}
.ep-pop[hidden]{display:none!important}
.sg-chart.sg-closed :is(.sg-bars,.sg-ch-f,.sg-ch-c){display:none!important}
body.solo .adv-pane .adv-row.vd-or.vd-or{grid-column:1/-1}
/* ---- top row icons only (switch: tbicons): the label slides out after resting on a button for a moment ---- */
@media (min-width:621px){
html:not(.ffo-tbicons:where(:not(.fft-tbicons))) body.rg .kb-switches .hx{gap:0!important;padding-left:10px!important;padding-right:10px!important;width:auto!important;font-size:14px!important}
html:not(.ffo-tbicons:where(:not(.fft-tbicons))) body.rg .kb-switches .hx :is(.hx-lab,#recLabel){display:inline-block!important;max-width:0;opacity:0;overflow:hidden;white-space:nowrap;margin-left:0;font-size:14px!important;vertical-align:middle;transition:max-width .25s ease,opacity .18s ease,margin-left .25s ease;transition-delay:0s}
html:not(.ffo-tbicons:where(:not(.fft-tbicons))) body.rg .kb-switches #recBtn.hx[aria-pressed="true"] #recLabel,html:not(.ffo-tbicons:where(:not(.fft-tbicons))) body.rg .kb-switches .hx:is(:hover,:focus-visible) :is(.hx-lab,#recLabel){max-width:120px;opacity:1;margin-left:7px;transition-delay:.7s}
html:not(.ffo-tbicons:where(:not(.fft-tbicons))) body.rg .kb-switches #susInd.hx{padding-left:11px!important;padding-right:11px!important}
}
@media (prefers-reduced-motion:reduce){html:not(.ffo-tbicons:where(:not(.fft-tbicons))) body.rg .kb-switches .hx .hx-lab{transition:none}}
/* icon-only at rest: no gap held open for the hidden label (it brings its own margin when it opens), even padding, so the icon sits dead centre */
html:not(.ffo-tbicons:where(:not(.fft-tbicons))) body.rg .kb-switches .hx{gap:0!important}
/* Left hand fill: notes it plays for you, in a softer shade of the key light; and the line where the left hand ends */
html body.solo #kb .kw.lh-auto:not(.on){background:color-mix(in srgb,var(--kl,#F6A801) 42%,#fbf6ec)!important;box-shadow:inset 0 -5px 0 color-mix(in srgb,var(--kl,#F6A801) 75%,#000)!important;transition:background .08s}
html body.solo #kb .kb-black.lh-auto:not(.on){background:color-mix(in srgb,var(--kl,#F6A801) 48%,#1b1a18)!important;box-shadow:inset 0 -4px 0 color-mix(in srgb,var(--kl,#F6A801) 80%,#000)!important}
#kb .lh-split{position:absolute;top:0;bottom:0;width:0;border-left:2px dashed color-mix(in srgb,var(--kl,#F6A801) 80%,transparent);z-index:4;pointer-events:none;margin-left:-1px}
#kb .lh-split i,#kb .lh-split .lh-grip{pointer-events:auto;cursor:ew-resize;touch-action:none}
#kb .lh-split i{font-size:11px!important;padding:4px 6px!important;top:5px!important}
#kb .lh-split .lh-grip{position:absolute;top:0;left:-9px;width:18px;height:30px;display:block}
#kb .lh-split.drag{border-left-style:solid}#kb .lh-split.drag i{box-shadow:0 0 0 2px #111,0 0 10px var(--kl,#F6A801)}
#kb .lh-split.lh-col{border-left-color:transparent;border-image:linear-gradient(var(--hl),var(--hr)) 1}
#kb .lh-split.lh-col i:first-child{background:var(--hl)}#kb .lh-split.lh-col i:last-child{background:var(--hr)}
#kb .lh-split .lh-grip:focus-visible{outline:2px solid var(--kl,#F6A801);outline-offset:2px;border-radius:4px}
#kb .lh-split i{position:absolute;top:6px;font:900 10px/1 var(--body);font-style:normal;color:#111;background:var(--kl,#F6A801);padding:3px 5px;border-radius:5px;opacity:.9}
#kb .lh-split i:first-child{right:4px}#kb .lh-split i:last-child{left:4px}
/* ---- Power switch (switch: power): a retro rocker in a metal housing, mounted on top of the case ---- */
/* on a computer too: room between the header and the switch on top of the case */
html:not(.ffo-power:where(:not(.fft-power))) body.solo:not(.mob) .hero .wrap>.kb-wrap{margin-top:44px!important}
.pw-sw,.pw-hint{display:none}
html:not(.ffo-power:where(:not(.fft-power))) body.solo .kb-wrap>.pw-sw{display:flex;align-items:center;gap:8px;position:absolute;top:-30px;right:64px;z-index:42;height:32px;padding:0 12px 2px 14px;border-radius:12px 12px 0 0;
background:linear-gradient(180deg,#34312c 0%,#2a2825 60%,#262421 100%);border:1px solid #3a3731;border-bottom:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 -6px 14px -6px rgba(0,0,0,.6)}
/* the hump's shoulders curve into the case top, so it reads as part of the chassis */
html:not(.ffo-power:where(:not(.fft-power))) body.solo .kb-wrap>.pw-sw::before,html:not(.ffo-power:where(:not(.fft-power))) body.solo .kb-wrap>.pw-sw::after{content:"";position:absolute;bottom:0;width:12px;height:12px;background:radial-gradient(circle at 0 0,transparent 11px,#262421 12px)}
html:not(.ffo-power:where(:not(.fft-power))) body.solo .kb-wrap>.pw-sw::before{left:-12px;background:radial-gradient(circle at 0 0,transparent 11px,#262421 12px)}
html:not(.ffo-power:where(:not(.fft-power))) body.solo .kb-wrap>.pw-sw::after{right:-12px;background:radial-gradient(circle at 100% 0,transparent 11px,#262421 12px)}
.pw-lab{font:900 9px/1 var(--body);letter-spacing:.24em;color:#8a8170;margin-right:-.24em}
.pw-rk{position:relative;width:46px;height:22px;padding:0;border:0;border-radius:4px;background:linear-gradient(#060505,#151412);box-shadow:inset 0 2px 3px rgba(0,0,0,.9),0 1px 0 rgba(255,255,255,.08);cursor:pointer}
.pw-cap{position:absolute;inset:2px 3px;border-radius:3px;display:flex;overflow:hidden;transition:transform .18s cubic-bezier(.3,1.4,.5,1),background .18s,box-shadow .18s;
background:linear-gradient(90deg,#2a0b09 0%,#3d110e 48%,#5a1712 52%,#7a1f1a 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.pw-cap b{flex:1;display:flex;align-items:center;justify-content:center;font:900 10px/1 var(--body);color:rgba(255,220,210,.55)}
/* a real rocker: I (on) is green, O (off) is red. The side you pressed sinks in and lights up; the other side tilts up towards you, catching the light */
.pw-rk{width:54px!important;height:24px!important;perspective:90px}
.pw-cap{background:none!important;gap:1px;transform-style:preserve-3d}
.pw-cap b{position:relative;transition:background .18s,box-shadow .18s,color .18s,transform .18s}
.pw-cap{flex-direction:row-reverse}.pw-cap .pw-i{border-radius:0 3px 3px 0}.pw-cap .pw-o{border-radius:3px 0 0 3px} /* O on the left, I on the right */
.pw-rk[aria-checked="true"] .pw-cap{transform:rotateY(20deg);box-shadow:-6px 0 6px -3px rgba(0,0,0,.75)}
.pw-rk[aria-checked="false"] .pw-cap{transform:rotateY(-20deg);box-shadow:6px 0 6px -3px rgba(0,0,0,.75)}
.pw-rk[aria-checked="true"] .pw-i{background:linear-gradient(180deg,#6dff9a,#24c457 60%,#178a3c);color:#fff;text-shadow:0 0 6px rgba(255,255,255,.7);box-shadow:inset 0 2px 4px rgba(0,0,0,.55),inset 0 -1px 0 rgba(255,255,255,.15),0 0 12px rgba(50,230,110,.55)}
.pw-rk[aria-checked="true"] .pw-o{background:linear-gradient(180deg,#a8574c,#6e2219 55%,#4a1610);color:rgba(255,225,220,.55);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 2px 0 3px rgba(0,0,0,.35)}
.pw-rk[aria-checked="false"] .pw-o{background:linear-gradient(180deg,#ff7a5c,#e0281b 60%,#b51d14);color:#fff;text-shadow:0 0 6px rgba(255,255,255,.7);box-shadow:inset 0 2px 4px rgba(0,0,0,.55),inset 0 -1px 0 rgba(255,255,255,.15),0 0 12px rgba(255,70,50,.6)}
.pw-rk[aria-checked="false"] .pw-i{background:linear-gradient(180deg,#5a9c6b,#2c6a3b 55%,#1d4a29);color:rgba(220,255,225,.55);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset -2px 0 3px rgba(0,0,0,.35)}
.pw-rk:focus-visible{outline:2px solid #F6A801;outline-offset:3px}
.pw-led{width:7px;height:7px;border-radius:50%;background:#3a1210;box-shadow:inset 0 1px 1px rgba(0,0,0,.6)}
html.pw-off .pw-led{background:#ff3b2f;box-shadow:0 0 8px #ff3b2f,0 0 2px #fff;animation:pwBlink 2.4s ease-in-out infinite}
@keyframes pwBlink{50%{opacity:.35}}
html:not(.pw-off) .pw-rk[aria-checked="true"]~.pw-led{background:#40e070;box-shadow:0 0 6px rgba(64,224,112,.8)}
/* standby: the whole rig dark and still, only the switch alive */
.pw-shade{display:none}
html.pw-off:not(.ffo-power:where(:not(.fft-power))) body.solo .kb-wrap>.pw-shade,html.pw-going:not(.ffo-power:where(:not(.fft-power))) body.solo .kb-wrap>.pw-shade{display:block;position:absolute;inset:0;z-index:40;border-radius:inherit;background:rgba(6,5,4,.82);animation:pwIn 1.1s ease-in both}
@keyframes pwIn{from{opacity:0}}
html.pw-off:not(.ffo-power:where(:not(.fft-power))) body.solo .kb-wrap>.pw-shade{animation:none}
html.pw-off:not(.ffo-power:where(:not(.fft-power))) body.solo .kb-wrap>.pw-hint{display:flex;flex-direction:column;align-items:center;gap:6px;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:43;padding:16px 22px;border-radius:16px;background:rgba(10,9,8,.72);border:1px solid #3a3630;color:#FBF6EC;text-align:center;cursor:pointer}
.pw-hint b{font:600 20px/1.1 var(--display);color:#F6A801;display:inline-flex;align-items:center;gap:8px}.pw-hint .pw-ch1{height:24px;width:auto;flex:none;fill:currentColor;color:#F6A801;transform:translateY(1px)}.pw-hint .pw-m,body.mob .pw-hint .pw-d{display:none}body.mob .pw-hint .pw-m{display:inline}body.mob .pw-hint{white-space:nowrap}
body.solo.mob .pw-card{left:8px!important;right:8px;width:auto!important;top:auto!important;bottom:calc(80px + env(safe-area-inset-bottom,0px))!important}.pw-hint span{font:700 13px/1.3 var(--body);color:#a9a091}
/* switching off: the lights drain out */
html.pw-going body.solo .lcd,html.pw-going body.solo .kb-side .lcd{transform:scaleY(.02);transition:transform .45s cubic-bezier(.6,0,.9,.4)}
html.pw-waking body.solo .kb-wrap>*{filter:brightness(1.3);transition:filter .3s}
@media (max-width:620px){html:not(.ffo-power:where(:not(.fft-power))) body.solo .kb-wrap>.pw-sw{right:22px;top:-26px;height:28px;padding:0 9px 2px}.pw-lab{display:none}}
@media (prefers-reduced-motion:reduce){.pw-cap{transition:none}.pw-shade{animation:none!important}html.pw-off .pw-led{animation:none}}
.lm-card{position:fixed;z-index:320;width:min(320px,calc(100vw - 16px));box-sizing:border-box;padding:14px;border-radius:18px;background:#1d1b18;border:1px solid #3a3630;box-shadow:0 18px 44px rgba(0,0,0,.6);color:#FBF6EC;font-family:var(--body)}
.lm-card[hidden]{display:none}
.lm-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}.lm-h b{font:600 17px/1.2 var(--display);color:#F6A801}
.lm-x{width:28px;height:28px;border-radius:50%;border:0;background:#2a2723;color:#FBF6EC;font-size:18px;line-height:1;cursor:pointer}
.lm-p{margin:0 0 10px;font-size:12.5px;line-height:1.45;color:#a9a091;font-weight:700}
.lm-row{display:flex;align-items:center;gap:10px;margin:8px 0}.lm-row>span{width:46px;flex:none;font:800 11px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:#8a8170}
.lm-bpm{display:flex;align-items:center;gap:6px;flex:1}.lm-bpm b{min-width:44px;text-align:center;font:600 22px/1 var(--display);color:#F6A801}
.lm-bpm button,.lm-tap{height:34px;min-width:34px;border-radius:999px;border:1px solid #3a3630;background:#262420;color:#FBF6EC;font:800 14px/1 var(--body);cursor:pointer}
.lm-tap{padding:0 14px}
.lm-seg{display:flex;gap:4px;flex:1}.lm-seg button{flex:1;height:32px;border-radius:999px;border:1px solid #3a3630;background:#262420;color:#d8d0c0;font:800 12.5px/1 var(--body);cursor:pointer}
.lm-seg button[aria-checked="true"]{background:#F6A801;border-color:#F6A801;color:#111}
.lm-go{display:flex;flex-direction:column;gap:6px;margin-top:12px}
.lm-card .lm-h{display:flex!important;align-items:center;justify-content:space-between;margin-bottom:4px}.lm-card .lm-h b{font:600 17px/1.2 var(--display)!important;color:var(--kl,#F6A801)!important;white-space:normal!important;overflow:visible!important} /* the Layers mixer also uses .lm-h; keep this card's own header */
.lm-card .lm-row{display:flex!important;grid-template-columns:none!important;overflow:visible!important;padding-bottom:0!important;min-width:0}.lm-card .lm-seg{min-width:0}.lm-card .lm-seg button{min-width:0;padding:0}.lm-card .lm-bpm{min-width:0}
body.solo.mob .lm-card{left:12px!important;right:12px!important;width:auto!important;max-width:none!important}
.lm-start{height:40px;border-radius:999px;border:0;background:#F6A801;color:#111;font:800 14px/1 var(--body);cursor:pointer}
.lm-free{height:32px;border-radius:999px;border:0;background:none;color:#a9a091;font:800 12.5px/1 var(--body);cursor:pointer}
.lm-free:hover{color:#FBF6EC}
.lm-alt{height:40px;border-radius:999px;border:1px solid #3a3630;background:#262420;color:#FBF6EC;font:800 14px/1 var(--body);cursor:pointer}
.tr-go button{height:auto!important;min-height:44px;padding:8px 14px;display:flex;flex-direction:column;align-items:center;gap:3px}
.tr-go small{font:700 11.5px/1.2 var(--body);opacity:.75}
.tr-n{display:flex;align-items:center;gap:8px;margin-top:10px;font:700 11.5px/1.35 var(--body);color:#8a8170;cursor:pointer}.tr-n input{accent-color:#F6A801;flex:none}
.sg-next{font:800 13px/1 var(--body);color:#8a8170;margin-left:10px;letter-spacing:.02em;white-space:nowrap}
html.ffo-songscan:where(:not(.fft-songscan)) #sgScan{display:none!important}
.sg-ch-tg{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:0;margin:0;color:inherit;font:inherit;cursor:pointer}
.sg-ch-tg svg{transition:transform .2s;flex:none}.sg-ch-tg[aria-expanded="true"] svg{transform:rotate(90deg)}
.sg-ch-tg:focus-visible{outline:2px solid #F6A801;outline-offset:3px;border-radius:6px}
body.solo .rig-panel .ep-pop button{height:auto!important;display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:7px 12px!important;border-radius:10px!important;text-align:left;text-transform:none!important;letter-spacing:0!important;font-size:13px!important;color:var(--cream)!important;background:transparent!important;border:1px solid transparent!important;white-space:normal!important;flex:none!important;width:100%}
body.solo .rig-panel .ep-pop button b{font-family:var(--display)!important;font-weight:600!important;font-size:15px!important;letter-spacing:0!important;text-transform:none!important;color:var(--cream)!important;display:block!important;order:0!important;flex:none!important}
body.solo .rig-panel .ep-pop button span{order:1}
body.solo .rig-panel .ep-pop [data-pv]{min-height:max-content!important;padding-bottom:9px!important}body.solo .rig-panel .ep-pop [data-pv] span{line-height:1.35;overflow:visible} /* a description on two lines stays inside its (selected) box */
body.solo .rig-panel .ep-pop button span{font-weight:700;font-size:12px;color:#a9a091}
body.solo .rig-panel .ep-pop button:hover{background:#262420!important}
body.solo .rig-panel .ep-pop button[aria-checked="true"]{background:#2e2b27!important;border-color:rgba(246,168,1,.45)!important}
body.solo .rig-panel .ep-pop button[aria-checked="true"] b{color:var(--yellow)!important}
.ep-pop small{display:block;padding:6px 10px 2px;color:#7d7566;font-weight:700;font-size:10.5px;line-height:1.4}
.ep-pop[data-pop="e"]{left:auto;right:0}
@media (max-width:620px){.ep-pop{left:0;right:auto;width:min(280px,calc(100vw - 48px))}.ep-pop[data-pop="e"]{left:auto;right:0}}
/* Looper (piano page) */
.lp{display:none}
body.solo .lp{display:inline-flex;align-items:center;gap:4px}
.lp-main{position:relative;display:inline-flex;align-items:center;gap:8px;height:44px;min-width:118px;padding:0 12px 0 44px;box-sizing:border-box;border-radius:999px;border:1px solid #3a3630;background:#262420;color:var(--cream);font:800 14px var(--body);cursor:pointer;white-space:nowrap;transition:border-color .15s,background .15s}
.lp-main:hover{border-color:#5a5246}
.lp-ring{position:absolute;left:6px;top:50%;width:30px;height:30px;margin-top:-15px;border-radius:50%;background:conic-gradient(var(--yellow) calc(var(--lp,0) * 1turn),#3a3630 0);-webkit-mask:radial-gradient(circle,transparent 11.5px,#000 12px);mask:radial-gradient(circle,transparent 11.5px,#000 12px)}
.lp-main svg{position:absolute;left:13px;top:50%;margin-top:-8px;color:#bfb6a4}
.lp-main em{font-style:normal;font:900 11px/1 var(--body);color:var(--black);background:var(--yellow);border-radius:999px;padding:3px 6px}
.lp-main em:empty{display:none}
.lp[data-mode="arm"] .lp-main{border-color:var(--yellow);animation:lpArm 1.1s ease-in-out infinite}
.lp[data-mode="arm"] .lp-main svg,.lp[data-mode="play"] .lp-main svg{color:var(--yellow)}
@keyframes lpArm{50%{box-shadow:0 0 0 4px rgba(246,168,1,.18)}}
.lp[data-mode="rec"] .lp-main,.lp[data-mode="dub"] .lp-main{background:#2c1d1b;border-color:#ff4d4d;color:#ffb3b3}
.lp[data-mode="rec"] .lp-ring{background:#ff4d4d;animation:lpRec 1s infinite}
.lp[data-mode="dub"] .lp-ring{background:conic-gradient(#ff4d4d calc(var(--lp,0) * 1turn),#4a2a26 0)}
.lp[data-mode="rec"] .lp-main svg,.lp[data-mode="dub"] .lp-main svg{color:#ff8080}
@keyframes lpRec{50%{opacity:.45}}
.lp[data-mode="play"] .lp-main{border-color:rgba(246,168,1,.55)}
.lp[data-mode="stop"] .lp-ring{background:#5a5246}
.lp-b{width:34px;height:34px;border-radius:50%;border:1px solid #3a3630;background:#262420;color:var(--cream);display:grid;place-items:center;cursor:pointer;padding:0;flex:none}
.lp-b:hover{border-color:#5a5246}
.lp-b[hidden]{display:none}
@media (max-width:620px){body.solo .lp{order:4}.lp-main{padding-right:14px}}
/* Looper lanes: one row per layer, number = on/off, waveform with beat grid, shared playhead */
.lp-lanes{display:none}
body.solo .lp-lanes:not([hidden]){display:block;margin:14px 0 0;padding:12px 14px 10px;border-radius:14px;background:linear-gradient(180deg,#201d1a,#1a1815);border:1px solid #34302a}
.lp-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 9px}
.lp-tt{font:800 11px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--yellow)}
.lp-info{font:700 12px/1 var(--body);color:#bfb6a4;white-space:nowrap;font-variant-numeric:tabular-nums}
.lp-rows{position:relative;display:grid;gap:6px}
.lp-row{display:grid;grid-template-columns:34px 1fr;gap:8px;align-items:center}
.lp-n{width:34px;height:30px;padding:0;border-radius:8px;border:1px solid var(--yellow);background:var(--yellow);color:var(--black);font:900 14px/1 var(--body);cursor:pointer;display:grid;place-items:center;font-variant-numeric:tabular-nums}
.lp-n:focus-visible{outline:2px solid var(--cream);outline-offset:2px}
.lp-w{position:relative;height:30px;border-radius:8px;background:#141210;box-shadow:inset 0 0 0 1px #2e2a25;overflow:hidden}
.lp-w canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.lp-row.off .lp-n{background:transparent;color:#8a8172;border-color:#4a443b}
.lp-row.off .lp-w{opacity:.32}
.lp-row.live .lp-n{background:#ff4d4d;border-color:#ff4d4d;color:#fff}
.lp-row.live .lp-w{box-shadow:inset 0 0 0 1px rgba(255,77,77,.55)}
.lp-ph{position:absolute;top:-3px;bottom:-3px;left:calc(42px + (100% - 42px) * var(--lp,0));width:2px;margin-left:-1px;border-radius:2px;background:var(--cream);box-shadow:0 0 6px rgba(251,246,236,.6);pointer-events:none;z-index:2}
.lp-lanes[data-mode="stop"] .lp-ph,.lp-lanes[data-mode="rec"] .lp-ph,.lp-lanes[data-mode="wait"] .lp-ph{opacity:0}
.lp-lanes[data-mode="rec"] .lp-n{background:#ff4d4d;border-color:#ff4d4d;color:#fff}
.lp-lanes[data-mode="rec"] .lp-w{background:repeating-linear-gradient(90deg,rgba(255,77,77,.16) 0 2px,transparent 2px 8px),#1d1514;box-shadow:inset 0 0 0 1px rgba(255,77,77,.5);animation:lpRec 1s infinite}
.lp-tip{margin:9px 0 0;font:700 11.5px/1.3 var(--body);color:#7d7566}
.lp-lanes[data-mode="rec"] .lp-tip{visibility:hidden}
/* Metronome built into the keyboard */
.fbt-card{position:fixed;z-index:330;box-sizing:border-box;padding:12px 14px 12px;border-radius:16px;background:#1d1b18;border:1px solid #5a400a;box-shadow:0 16px 40px rgba(0,0,0,.6);color:var(--cream);font-family:var(--body)}
.fbt-t{display:flex;align-items:center;justify-content:space-between;gap:10px;font-weight:900;font-size:14px}
.fbt-x{width:26px;height:26px;border-radius:50%;border:0;background:#2c2924;color:var(--cream);font:800 15px/1 var(--body);cursor:pointer}
.fbt-r{display:flex;align-items:center;gap:8px;margin-top:10px}
.fbt-lcd{display:inline-flex;align-items:baseline;gap:5px;height:36px;padding:0 12px;border-radius:10px;background:radial-gradient(130% 150% at 50% 0,#3a2805 0,#1f1503 75%);box-shadow:inset 0 0 0 1px #5a400a;color:#ffc93d;font-family:'VT323',monospace;text-shadow:0 0 6px rgba(255,176,0,.6)}
.fbt-lcd b{font-weight:400;font-size:30px;line-height:36px}.fbt-lcd small{font-size:15px}
.fbt-seg{display:inline-flex;padding:2px;border-radius:999px;background:#2c2924}
.fbt-seg button{height:30px;padding:0 11px;border:0;border-radius:999px;background:none;color:#bfb6a4;font:800 13px/1 var(--body);cursor:pointer}
.fbt-seg button.on{background:var(--yellow);color:#111}
.fbt-go{margin-left:auto;height:34px;padding:0 14px;border-radius:999px;border:0;background:var(--yellow);color:#111;font:900 13px/1 var(--body);cursor:pointer}
.fbt-a{display:flex;align-items:center;gap:8px;margin:10px 0 0;color:#bfb6a4;font-weight:700;font-size:12.5px;cursor:pointer}
.fbt-a input{accent-color:#F6A801;width:15px;height:15px;margin:0}
html.ffo-feelbeat:where(:not(.fft-feelbeat)) .fbt-card,html.ffo-feelbeat:where(:not(.fft-feelbeat)) .fbt-pill{display:none!important}
/* the beat suggestion: a slim message that rises out of the BPM control (like "Sounds like G" from the Key control). It floats
above the bar, so nothing on the rig moves when it comes and goes */
body.solo #mtk{position:relative}
.fbt-pill{position:absolute;left:0;bottom:calc(100% + 8px);z-index:60;display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 3px 0 10px;border:1px solid rgba(107,83,32,.7);border-radius:999px;background:rgba(35,29,16,.86);color:#d9cfbd;font:700 11.5px/1 var(--body);white-space:nowrap;box-shadow:0 10px 26px rgba(0,0,0,.55);opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .25s ease,transform .3s cubic-bezier(.2,.8,.2,1)}
.fbt-pill.on{opacity:.88;transform:none;pointer-events:auto}
.fbt-pill b{color:var(--yellow);font-weight:900}
.fbt-pill i{font-style:normal}
.fbt-pill button{height:22px;padding:0 9px;border:0;border-radius:999px;font:900 11.5px/1 var(--body);cursor:pointer}
.fbt-pill .fbt-sg{background:#2c2924;color:#cfc6b4}
.fbt-pill .fbt-st{background:var(--yellow);color:#111}
.fbt-pill .fbt-px{width:22px;padding:0;background:none;color:#8a8170;font-size:15px}
@media (prefers-reduced-motion:reduce){.fbt-pill{transition:none}}
body.solo.mob .fbt-pill{left:auto;right:0}
.trk-strip,.trk{display:none}
body.solo .trk-strip{display:flex;align-items:center;gap:10px;margin:12px auto 0;max-width:var(--rig-w,1280px);box-sizing:border-box;height:58px;padding:0 12px 0 8px;border-radius:16px;background:#1d1b18;border:1px solid #3a3630;font-family:var(--body);color:var(--cream)}
body.solo .trk-strip[hidden]{display:none}
.trk-open{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 16px;border-radius:999px;border:0;background:var(--yellow);color:#111;font:900 14.5px/1 var(--body);cursor:pointer;flex:none}
.trk-strip.open .trk-open{background:#2e2615;color:var(--yellow);box-shadow:inset 0 0 0 1px var(--yellow)}
.trk-slcd{flex:none;height:38px;display:inline-flex;align-items:center;padding:0 12px;border-radius:10px;background:#1f1503;box-shadow:inset 0 0 0 1px #5a400a;font-family:'VT323',monospace;font-size:22px;color:#ffc93d;white-space:nowrap}
.trk-strip.rec .trk-slcd{color:#ff8a80;box-shadow:inset 0 0 0 1px #7a2b2b}
.trk-chips{display:flex;gap:6px;min-width:0;overflow:hidden}
.trk-chip{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 11px;border-radius:999px;background:#262420;border:1px solid #3a3630;font-weight:800;font-size:13px;white-space:nowrap}
.trk-chip i{width:9px;height:9px;border-radius:50%;background:var(--c)}
body.solo .trk{display:block;margin:10px auto 0;max-width:var(--rig-w,1280px);border-radius:18px;background:#171614;border:1px solid #3a3630;overflow:hidden;font-family:var(--body);color:var(--cream)}
body.solo .trk[hidden]{display:none}
.trk-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 12px;background:#1d1b18;border-bottom:1px solid #3a3630}
.trk-tp{display:flex;gap:6px}
.trk-tp button{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;border:1px solid #3a3630;background:#262420;color:var(--cream);cursor:pointer}
.trk-tp .pri{background:var(--yellow);border-color:var(--yellow);color:#111}
.trk-tp .pri.on{background:#2e2615;color:var(--yellow)}
.trk-tp .rec{border-color:#ff6b6b;background:#3a1d1d;color:#ff6b6b}
.trk-tp .rec.on{background:#ff4d4d;color:#fff;animation:trkB 1s infinite}
@keyframes trkB{50%{opacity:.6}}
.trk-tp [aria-pressed="true"]{border-color:var(--yellow);background:#2e2615;color:var(--yellow)}
.trk-lcd{display:flex;align-items:center;gap:24px;height:50px;padding:0 18px;border-radius:12px;background:radial-gradient(130% 150% at 50% 0,#3a2805 0,#1f1503 75%);box-shadow:inset 0 0 0 1px #5a400a;font-family:'VT323',monospace;color:#ffc93d;text-shadow:0 0 6px rgba(255,176,0,.55)}
.trk-lcd span{display:flex;flex-direction:column;line-height:1;align-items:flex-start}.trk-lcd span:first-child{min-width:78px}.trk-lcd span:nth-child(2){min-width:74px}.trk-lcd b{font-weight:400;font-size:30px;white-space:nowrap}.trk-lcd small{font-size:13px;opacity:.75}
.trk-pill{height:38px;padding:0 13px;border-radius:999px;border:1px solid #3a3630;background:#262420;color:var(--cream);font:800 13px/1 var(--body);cursor:pointer;white-space:nowrap}
.trk-pill[aria-pressed="true"]{border-color:var(--yellow);background:#2e2615;color:var(--yellow)}
.trk-sp{flex:1}
.trk-save{position:relative}
.trk-menu{position:absolute;right:0;top:44px;z-index:20;display:flex;flex-direction:column;min-width:260px;padding:6px;border-radius:14px;background:#1d1b18;border:1px solid #3a3630;box-shadow:0 16px 40px rgba(0,0,0,.6)}
.trk-menu[hidden]{display:none}
.trk-menu button{text-align:left;height:40px;padding:0 12px;border:0;border-radius:10px;background:none;color:var(--cream);font:800 13.5px/1 var(--body);cursor:pointer}
.trk-menu button:hover{background:#262420}.trk-menu .dang{color:#ff8a80}
.trk-x{width:40px;height:40px;border-radius:50%;border:0;background:#2c2924;color:var(--cream);font:800 18px/1 var(--body);cursor:pointer}
.trk-main{display:flex}
.trk-heads{width:260px;flex:none;border-right:1px solid #3a3630}
.trk-hr{height:34px;display:flex;align-items:center;padding:0 14px;font-size:12px;font-weight:900;letter-spacing:.14em;color:#8a8170;border-bottom:1px solid #3a3630;background:#1a1917;box-sizing:border-box}
.trk-h{display:flex;align-items:center;gap:7px;height:62px;padding-right:10px;border-bottom:1px solid #2c2a26;box-sizing:border-box}
.trk-c{width:6px;align-self:stretch;background:#3a3630}.trk-h.has .trk-c{background:var(--c)}
.trk-n{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;padding-left:6px}
.trk-n b{font-size:14.5px;font-weight:900;color:#8a8170;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.trk-h.has .trk-n b{color:var(--cream)}
.trk-n small{font-size:10.5px;font-weight:800;letter-spacing:.08em;color:#6f675a}
.trk-h button{width:30px;height:30px;border-radius:8px;border:1px solid #3a3630;background:#262420;color:#bfb6a4;font:900 12px/1 var(--body);cursor:pointer;flex:none}
.trk-h [data-k="arm"][aria-pressed="true"]{border-color:#ff6b6b;background:#3a1d1d;color:#ff6b6b}
.trk-h [data-k="mute"][aria-pressed="true"]{border-color:#5a5246;background:#26221c;color:#b9af9c}
.trk-h [data-k="solo"][aria-pressed="true"]{border-color:var(--yellow);background:#2e2615;color:var(--yellow)}
.trk-m{width:6px;height:40px;border-radius:3px;background:#262420;position:relative;overflow:hidden;flex:none}
.trk-m i{position:absolute;left:0;right:0;bottom:0;height:0;background:linear-gradient(0deg,#7ed6a5,#F6A801)}
.trk-lanes{position:relative;flex:1;min-width:0}
.trk-ruler{display:block;height:34px;border-bottom:1px solid #3a3630;background:#1a1917;cursor:pointer;touch-action:none}
.trk-r{position:relative;height:62px;border-bottom:1px solid #2c2a26;box-sizing:border-box}
.trk-r.armed{background:rgba(255,107,107,.05)}
.trk-h[hidden],.trk-r[hidden]{display:none}
.trk-r canvas{position:absolute;left:0;top:0}
.trk-e{position:absolute;left:14px;top:22px;font-size:12.5px;font-weight:700;color:#4a463f}
.trk-e[hidden]{display:none}
.trk-head{position:absolute;top:0;bottom:0;left:0;width:2px;margin-left:-1px;background:var(--cream);box-shadow:0 0 10px rgba(251,246,236,.6);pointer-events:none;will-change:transform}
.trk-cnt{white-space:nowrap}
.trk-foot{display:flex;align-items:center;gap:12px;padding:9px 14px;background:#1d1b18;font-size:12.5px;font-weight:800;color:#bfb6a4}
@media (max-width:760px){
body.solo .trk-strip{margin:8px 8px 0;height:auto;min-height:54px;flex-wrap:wrap;padding:6px 8px}
.trk-chips{display:none}
body.solo .trk{position:fixed;left:0;right:0;bottom:0;z-index:420;margin:0;max-height:74vh;max-height:calc(100dvh - 180px);border-radius:20px 20px 0 0;overflow:auto;box-shadow:0 -20px 40px rgba(0,0,0,.6)}
.trk-bar{position:relative;padding-right:60px}
.trk-x{position:absolute;right:10px;top:12px}
.trk-heads{width:150px}.trk-h{gap:5px;padding-right:6px}.trk-h [data-k="solo"],.trk-h .trk-m{display:none}.trk-n small{display:none}.trk-n{padding-left:4px}.trk-n b{font-size:13px}
.trk-h button{width:28px;height:28px}
.trk-lcd{gap:14px;padding:0 12px;height:46px}.trk-lcd b{font-size:25px}.trk-lcd span:first-child,.trk-lcd span:nth-child(2){min-width:0}.trk-lcd span:nth-child(2),.trk-lcd span:nth-child(4){display:none}
.trk-pill[data-t="count"]{display:none}
}
body.solo.mob .trk{bottom:calc(71px + env(safe-area-inset-bottom,0px));max-height:calc(100dvh - 240px)}
html.ffo-tracks:where(:not(.fft-tracks)) .trk-strip,html.ffo-tracks:where(:not(.fft-tracks)) .trk{display:none!important}
html:not(.ffo-panels:where(:not(.fft-panels))) body.solo .rig-panel .mix-strip.pn-off:not(#_x#_y){display:none!important} /* outranks the Input strips own show rules */
.pn-x{display:none}
html:not(.ffo-panels:where(:not(.fft-panels))) body.solo .rig-panel .pn-has>.pn-x{display:grid;place-items:center;position:absolute;top:7px;right:7px;z-index:5;width:22px;height:22px;padding:0;border-radius:50%;border:1px solid #3a3630;background:#1d1b18;color:#8a8170;cursor:pointer;opacity:.55}
html:not(.ffo-panels:where(:not(.fft-panels))) body.solo .rig-panel .pn-has:hover>.pn-x,html:not(.ffo-panels:where(:not(.fft-panels))) body.solo .rig-panel .pn-x:focus-visible{opacity:1}
html:not(.ffo-panels:where(:not(.fft-panels))) body.solo .rig-panel .pn-x:hover{color:#ff8a80;border-color:#7a2b2b}
html:not(.ffo-panels:where(:not(.fft-panels))) body.solo .rig-panel .pn-has.ms-col>.pn-x{display:none}
html:not(.ffo-panels:where(:not(.fft-panels))):not(.ffo-panelmin:where(:not(.fft-panelmin))) body.solo .rig-panel .pn-has>.ms-min{right:34px!important}
html:not(.ffo-panels:where(:not(.fft-panels))):not(.ffo-panelmin:where(:not(.fft-panelmin))) body.solo .rig-panel .pn-has .flip-tab{right:62px!important}
html:not(.ffo-panels:where(:not(.fft-panels))) body.solo .rig-panel .pn-has:not(.mix-synth):not(.mix-drums) .ms-h{padding-right:52px!important;box-sizing:border-box}
html:not(.ffo-panels:where(:not(.fft-panels))) body.solo .rig-panel :is(.mix-synth,.mix-drums).pn-has .ms-h{padding-right:62px!important;box-sizing:border-box;flex-wrap:wrap;row-gap:6px}
html:not(.ffo-panels:where(:not(.fft-panels))) body.solo .rig-panel :is(.mix-synth,.mix-drums).pn-has .ms-h .flip-tab{position:static!important;margin-left:auto}
.pn-btn{display:none}
html:not(.ffo-panels:where(:not(.fft-panels))) body.solo .kb-switches .pn-btn{display:inline-flex}
body.solo .kb-switches .pn-btn[hidden]{display:none!important}
.pn-btn.open{border-color:var(--kl,#F6A801);color:var(--kl,#F6A801)}
.pn-card{position:fixed;z-index:330;box-sizing:border-box;padding:14px;border-radius:18px;background:#1d1b18;border:1px solid #3a3630;box-shadow:0 18px 44px rgba(0,0,0,.6);color:var(--cream);font-family:var(--body)}
.pn-card[hidden]{display:none}
.pn-h{display:grid;grid-template-columns:1fr auto;column-gap:10px;align-items:start;margin-bottom:8px}
.pn-h b{font-size:16px;font-weight:900}.pn-h span{grid-column:1;font-size:12.5px;font-weight:700;color:#bfb6a4;line-height:1.4}
.pn-cx{grid-column:2;grid-row:1/3;width:28px;height:28px;border-radius:50%;border:0;background:#2c2924;color:var(--cream);font:800 16px/1 var(--body);cursor:pointer}
.pn-l{display:flex;flex-direction:column;max-height:min(60vh,520px);overflow:auto}
.pn-r{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:50px;padding:6px 2px;border-bottom:1px solid #2c2a26}
.pn-r:last-child{border-bottom:0}
.pn-r span{display:flex;flex-direction:column;gap:2px}
body.ml-on #mixPanel .led-btn[id]{outline:2px dashed rgba(46,230,182,.55);outline-offset:3px;cursor:crosshair}body.ml-on #mixPanel .led-btn.ml-linked{outline-style:solid;outline-color:#2EE6B6}
.pn-r>span{flex:1 1 auto;min-width:0}
.pn-grip{flex:none;display:grid;place-items:center;width:28px;height:40px;margin:0 -4px 0 -6px;padding:0;border:0;border-radius:8px;background:none;color:#6f685c;cursor:grab;touch-action:none}
.pn-grip:hover,.pn-grip:focus-visible{color:var(--kl,#F6A801);background:#262420}
.pn-r.srt-lift{background:#2a2723;border-radius:12px;box-shadow:0 14px 30px rgba(0,0,0,.55),0 2px 6px rgba(0,0,0,.4),inset 0 0 0 1px #6b5320;position:relative;z-index:3;border-bottom-color:transparent}.pn-r.srt-lift .pn-grip{color:var(--kl,#F6A801);cursor:grabbing}
body.srt-on,body.srt-on *{cursor:grabbing!important;user-select:none!important;-webkit-user-select:none!important}
body.solo:not(.mob) .rig-panel #mixPanel>.mix-strip :is(.ms-h>b,.msr-t){cursor:grab}
body.solo.pn-rdragging,body.solo.pn-rdragging *{cursor:grabbing!important;user-select:none!important}
body.solo .rig-panel #mixPanel>.mix-strip.srt-lift{position:relative;z-index:8;box-shadow:0 22px 44px rgba(0,0,0,.6),0 0 0 1px #6b5320!important}.pn-r b{font-size:14.5px;font-weight:900}.pn-r small{font-size:12px;font-weight:700;color:#8a8170}
.pn-def{margin-top:8px;width:100%;height:34px;border-radius:999px;border:0;background:none;color:#c9bea9;font:700 12.5px/1 var(--body);cursor:pointer;text-decoration:underline;text-underline-offset:3px}.pn-def[hidden]{display:none}.pn-def:hover{color:var(--kl,#F6A801)}
.pn-min{margin-top:10px;width:100%;height:40px;border-radius:999px;border:1px solid #3a3630;background:#262420;color:var(--cream);font:800 13px/1 var(--body);cursor:pointer}
.pn-min:hover{border-color:#6b6458}.pn-min[hidden]{display:none}
.trk-tb.on{border-color:var(--kl,#F6A801);color:var(--kl,#F6A801)}
body.solo.mob .pn-x{display:none!important}
/* ---- Panel sizes (switch: thin): Full, Thin, Keys only ---- */
.psz-sw,.pszb{display:none}
html:not(.ffo-thin:where(:not(.fft-thin))) body.solo:not(.mob) .kb-wrap>.psz-sw{display:flex;align-items:center;gap:8px;position:absolute;top:-30px;left:64px;z-index:42;height:32px;padding:0 10px 2px 14px;border-radius:12px 12px 0 0;
background:linear-gradient(180deg,#34312c 0%,#2a2825 60%,#262421 100%);border:1px solid #3a3731;border-bottom:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 -6px 14px -6px rgba(0,0,0,.6)}
html:not(.ffo-thin:where(:not(.fft-thin))) body.solo.kp-hump:not(.mob) .kb-wrap>.psz-sw{left:292px}
html:not(.ffo-thin:where(:not(.fft-thin))) body.solo.kp-hump.fs-on:not(.mob) .kb-wrap>.psz-sw{left:328px} /* full screen: Position gains its exit button, Panel moves along */
html:not(.ffo-thin:where(:not(.fft-thin))) body.solo:not(.mob) .kb-wrap>.psz-sw::before,html:not(.ffo-thin:where(:not(.fft-thin))) body.solo:not(.mob) .kb-wrap>.psz-sw::after{content:"";position:absolute;bottom:0;width:12px;height:12px}
html:not(.ffo-thin:where(:not(.fft-thin))) body.solo:not(.mob) .kb-wrap>.psz-sw::before{left:-12px;background:radial-gradient(circle at 0 0,transparent 11px,#262421 12px)}
html:not(.ffo-thin:where(:not(.fft-thin))) body.solo:not(.mob) .kb-wrap>.psz-sw::after{right:-12px;background:radial-gradient(circle at 100% 0,transparent 11px,#262421 12px)}
.psz-sw .pw-lab{text-transform:uppercase}
/* first load: the panel row fades in once it has found its size (folds, Wide, chord screen), instead of jumping while it settles */
html.np-settle body.solo .kb-wrap>.rig-panel{opacity:0}
body.solo .kb-wrap>.rig-panel{transition:opacity .28s ease}
html.ffo-kidsrig:where(:not(.fft-kidsrig)) [data-kids],body.mob [data-kids]{display:none!important}
html.kd-wait:not(.ffo-kidsrig:where(:not(.fft-kidsrig))) body.solo .hero{visibility:hidden}
/* Thin and Keys only: the panel folds away, the strip takes its place */
body.solo.psz-thin .kb-wrap>.rig-panel,body.solo.psz-keys .kb-wrap>.rig-panel{display:none!important}
body.solo:is(.psz-thin,.psz-keys) .kb-wrap>.pszb{display:flex;align-items:center;gap:10px;margin:0 0 12px;padding:0 8px;box-sizing:border-box;border-radius:12px;background:linear-gradient(180deg,#262421,#181715);border:1px solid #34312b;font-family:var(--body);color:var(--cream)}
body.solo.psz-thin .kb-wrap>.pszb{height:60px}
body.solo.psz-keys .kb-wrap>.pszb{height:32px;border-radius:9px;background:#181715;border-color:#2c2a26}
body.solo.psz-keys.psz-nolcd .kb-wrap>.pszb{display:none!important}
html body.solo:is(.psz-thin,.psz-keys) .kb-wrap>.pszb{order:3!important} /* phones on their side lay the case out as a column: the chord strip still sits on top of the keys, like on a computer */
.psz-tg{display:none}
body.solo:not(.mob) .kb-switches .psz-tg{order:3;position:relative;display:inline-grid;place-items:center;width:36px;height:28px;padding:0;border-radius:999px;border:1px solid #3a3630;background:#1d1b18;color:#8a8170;cursor:pointer}
body.solo:not(.mob) .kb-switches .psz-tg[aria-pressed="true"]{color:var(--kl,#F6A801);border-color:var(--kl,#F6A801)}
/* Full rig: the same button folds the chord screen away sideways, so only the panels are left (and slides it back) */
body.solo:not(.mob) .kb-wrap .rig-panel>.kb-side{transition:flex-basis .38s cubic-bezier(.2,.8,.2,1),width .38s cubic-bezier(.2,.8,.2,1),max-width .38s cubic-bezier(.2,.8,.2,1),margin .38s cubic-bezier(.2,.8,.2,1),opacity .25s ease,transform .38s cubic-bezier(.2,.8,.2,1)}
body.solo.psz-meas .kb-wrap .rig-panel,body.solo.psz-meas .kb-wrap .rig-panel *{transition:none!important}
html body.solo.psz-nolcd:not(.mob):not(.psz-keys) .kb-wrap .rig-panel>.kb-side:not(#_x){flex-basis:0!important;width:0!important;min-width:0!important;max-width:0!important;margin-right:0!important;margin-left:0!important;padding-left:0!important;padding-right:0!important;opacity:0;transform:scale(.96);overflow:hidden;pointer-events:none}
body.solo.psz-keys .kb-switches .psz-tg{order:3;position:relative;display:inline-grid;place-items:center;width:36px;height:28px;padding:0;border-radius:999px;border:1px solid #3a3630;background:#1d1b18;color:#8a8170;cursor:pointer}
body.solo.psz-keys .kb-switches .psz-tg[aria-pressed="true"]{color:var(--kl,#F6A801);border-color:var(--kl,#F6A801)}
body.solo.psz-keys .kb-switches .psz-tg:hover{color:var(--cream)}
.pszb-logo{flex:none;display:block;width:46px;height:46px;padding:0;border:0;border-radius:11px;background:none;cursor:pointer;filter:drop-shadow(0 3px 6px rgba(0,0,0,.55));transition:transform .25s cubic-bezier(.2,.9,.3,1.3)}
.pszb-logo:hover{transform:scale(1.08)}.pszb-logo:active{transform:scale(1.02)}.pszb-logo:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.pszb-logo{transition:none}}
.pszb-logo>svg{display:block;width:100%;height:100%}
.pszb-logo>b{display:grid;place-items:center;height:100%;border:2px solid var(--kl,#F6A801);border-radius:10px;font:700 18px/1 var(--display);color:var(--kl,#F6A801)}
.pszb-num{align-self:center;display:inline-grid;place-items:center;min-width:26px;height:26px;padding:0 5px;box-sizing:border-box;border:1.5px solid #c99a2e;border-radius:4px;font-style:normal;font-size:22px;line-height:1;color:#ffc93d}
.pszb-num[hidden]{display:none}
body.solo.psz-keys .pszb-num{height:18px;min-width:18px;font-size:16px}
.pszb-lcd{flex:0 1 auto;min-width:0;max-width:44%;display:inline-flex;align-items:baseline;gap:10px;height:40px;padding:0 14px;box-sizing:border-box;border-radius:9px;background:radial-gradient(130% 150% at 50% 0,#3a2805 0,#1f1503 75%);box-shadow:inset 0 0 0 1px #5a400a;font-family:'VT323',monospace;color:#ffc93d;line-height:40px;white-space:nowrap;overflow:hidden;text-shadow:0 0 6px rgba(255,190,40,.35)}
.pszb-lcd b{font-weight:400;font-size:30px}.pszb-lcd em{font-style:normal;font-size:20px;color:#d8a52a}.pszb-lcd small{font-size:18px;color:#c99a2e;letter-spacing:.06em}
.pszb-chips{flex:0 1 auto;min-width:0;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}.pszb-chips::-webkit-scrollbar{display:none}
.pszc{--lv:0;flex:none;display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 13px 0 8px;border-radius:999px;border:1px solid #34312b;background:#1d1b18;color:#a99f8e;font:800 13px/1 var(--body);cursor:pointer;white-space:nowrap;-webkit-user-select:none;user-select:none;touch-action:manipulation}
.pszc i{width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 50% 40%,#3a3630,#1b1916);box-shadow:inset 0 0 0 1px #4a453d}
.pszc.lit{color:var(--cream);border-color:#6b5317;background:linear-gradient(180deg,#2a2009,#1d1709);box-shadow:0 0 calc(var(--lv)*18px) rgba(246,168,1,calc(var(--lv)*.55)),inset 0 0 calc(var(--lv)*10px) rgba(246,168,1,calc(var(--lv)*.35))}
.pszc.lit i{background:radial-gradient(circle at 50% 40%,#ffd46b,var(--kl,#F6A801));box-shadow:0 0 calc(5px + var(--lv)*12px) var(--kl,#F6A801)}
.pszc:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}
.pszb-sp{flex:1 1 0;min-width:4px}
.pszb .psz-seg{flex:none}
body.solo.psz-keys .pszb :is(.pszb-logo,.pszb-chips){display:none}
@media (max-width:1000px){.pszb-lcd em{display:none}.pszb-lcd{max-width:34%}}
@media (max-width:820px){.pszb-lcd small{display:none}.pszc{padding:0 10px 0 6px;font-size:12px}.pszb-logo{display:none!important}}
body.solo.psz-keys .pszb-lcd{height:24px;line-height:24px;padding:0 10px;background:none;box-shadow:none}
body.solo.psz-keys .pszb-lcd b{font-size:20px}body.solo.psz-keys .pszb-lcd em{font-size:16px}body.solo.psz-keys .pszb-lcd small{font-size:15px}
body.solo.psz-keys .pszb .psz-seg button{height:18px}
body.solo.psz-keys .pszb-lcd{cursor:pointer;user-select:none}
body.solo.psz-keys .pszb.pos-c .pszb-lcd{margin:0 auto}body.solo.psz-keys .pszb.pos-r .pszb-lcd{margin-left:auto}
body.solo.psz-keys .pszb:is(.pos-c,.pos-r) .pszb-sp{display:none}
/* the offer: a slim message rising from the PANEL switch */
.psz-offer{position:absolute;left:calc(100% + 18px);top:-1px;z-index:60;display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 4px 0 12px;border:1px solid #6b5320;border-radius:999px;background:#231d10;color:#d9cfbd;font:700 12.5px/1 var(--body);white-space:nowrap;box-shadow:0 10px 26px rgba(0,0,0,.55);opacity:0;transform:translateX(-8px);pointer-events:none;transition:opacity .25s ease,transform .3s cubic-bezier(.2,.8,.2,1)}
.psz-offer.on{opacity:1;transform:none;pointer-events:auto}
.psz-offer:not(.on){visibility:hidden;transition:opacity .25s,transform .25s,visibility 0s .25s} /* hidden means hidden: its buttons never show through */
.psz-offer button{height:26px;padding:0 10px;border:0;border-radius:999px;background:var(--yellow);color:#111;font:900 11.5px/1 var(--body);cursor:pointer}
.psz-offer .psz-ox{width:26px;padding:0;background:none;color:#8a8170;font-size:15px}
/* folded panels glow with how hard they play */
.rig-panel .mix-strip.ms-col>.ms-rail{background-image:radial-gradient(140% 70% at 50% 100%,rgba(246,168,1,calc(var(--lv,0)*.5)),transparent 75%);box-shadow:inset 0 0 0 1px rgba(246,168,1,calc(var(--lv,0)*.7)),inset 0 0 calc(var(--lv,0)*16px) rgba(246,168,1,calc(var(--lv,0)*.4))}
.rig-panel .mix-strip.ms-col>.ms-rail .msr-t{text-shadow:0 0 calc(var(--lv,0)*10px) rgba(246,168,1,calc(var(--lv,0)*.9))}
@media (prefers-reduced-motion:reduce){.psz-offer{transition:none}}
.pn-grab{display:none}
body.solo.mob .pn-card{left:0!important;right:0;top:auto!important;bottom:calc(71px + env(safe-area-inset-bottom,0px));width:auto!important;max-height:calc(100dvh - 200px);overflow:auto;border-radius:22px 22px 0 0;padding:8px 16px 16px;z-index:260;border-bottom:0;box-shadow:0 -20px 50px rgba(0,0,0,.6)}
body.solo.mob .pn-grab{display:block;width:44px;height:5px;border-radius:3px;background:#3a3630;margin:2px auto 10px}
body.solo.mob .pn-r{min-height:56px}
body.solo.mob.pn-sheet::after{content:"";position:fixed;inset:0;z-index:255;background:rgba(0,0,0,.5)}
body.solo.mob .mob-add{color:var(--kl,#F6A801);border-style:dashed;border-color:#5a400a;background:transparent}
body.solo.mob .mob-add svg{margin-left:-4px}
.mtk{display:none}
body.solo .mtk{display:inline-flex;align-items:center;gap:4px;height:44px;padding:0 5px;box-sizing:border-box;border-radius:999px;border:1px solid #3a3630;background:#262420;flex:none}
.mtk button{font-family:var(--body);cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:none}
.mtk-go{width:34px;height:34px;border-radius:50%;border:1px solid #4a443b;background:#1b1916;color:#bfb6a4;display:grid;place-items:center;padding:0;flex:none}
.mtk-go .mtk-st{display:none}
.mtk.on .mtk-go{background:var(--yellow);border-color:var(--yellow);color:var(--black)}
.mtk.on .mtk-go .mtk-pl{display:none}.mtk.on .mtk-go .mtk-st{display:block}
.mtk-pm{width:24px;height:34px;border:0;background:transparent;color:#bfb6a4;font:800 18px/1 var(--body);padding:0;border-radius:8px;flex:none}
.mtk-pm:hover{color:var(--cream)}
.mtk-lcd{display:inline-flex;align-items:baseline;justify-content:center;gap:4px;height:32px;min-width:76px;padding:0 9px;box-sizing:border-box;border-radius:7px;border:0;background:radial-gradient(130% 150% at 50% 0,#3a2805 0,#1f1503 75%);box-shadow:inset 0 0 0 1px #5a400a,inset 0 0 10px rgba(0,0,0,.6);color:#ffc93d;cursor:ns-resize;line-height:32px}
.mtk-lcd b{font:400 24px/32px 'VT323',monospace;letter-spacing:.04em;text-shadow:0 0 2px #ffb000,0 0 10px rgba(255,190,40,.55);font-variant-numeric:tabular-nums;min-width:3ch;text-align:right}
.mtk-lcd small{font:400 13px/1 'VT323',monospace;letter-spacing:.08em;color:#e0a520;text-shadow:0 0 6px rgba(255,190,40,.4)}
.mtk-leds{display:inline-flex;align-items:center;gap:5px;padding:0 6px 0 4px}
.mtk-leds i{width:8px;height:8px;border-radius:50%;background:#3d372e;box-shadow:inset 0 1px 1px rgba(0,0,0,.5);transition:background .05s,box-shadow .05s}
.mtk-leds i.acc{width:10px;height:10px}
.mtk-leds i.lit{background:var(--yellow);box-shadow:0 0 8px rgba(246,168,1,.85),0 0 2px #fff6}
.mtk-leds i.acc.lit{background:#ff5a3c;box-shadow:0 0 9px rgba(255,90,60,.9)}
.mtk-tap{height:34px;padding:0 11px;border-radius:999px;border:1px solid #4a443b;background:#1b1916;color:#bfb6a4;font:900 11px/1 var(--body)!important;letter-spacing:.14em;flex:none}
.mtk-tap.hit{background:var(--yellow);color:var(--black);border-color:var(--yellow)}
body.solo.mtk-slim .mtk-pm,body.solo.mtk-slim .mtk-tap{display:none}
@media (max-width:620px){ body.solo #kbTools .mtk{order:3;flex:1 1 100%;justify-content:space-between} }
/* ch1: no chord buttons; the keyboard metronome is just the tempo screen with its beat pulse (tap it to open the metronome) */
body.solo .kb-chords{display:none!important}
body.solo .mtk .mtk-go,body.solo .mtk .mtk-pm,body.solo .mtk .mtk-tap{display:none!important}
body.solo .mtk{gap:0;padding:4px 4px 4px 5px;height:44px;background:#262420;border-color:#3a3630;position:relative}
/* the tempo screen matches the Key screen: same recessed amber screen, label first, same type */
body.solo .mtk .mtk-lcd{display:inline-flex;align-items:baseline;justify-content:center;gap:5px;height:32px;min-width:72px;padding:0 9px;box-sizing:border-box;border-radius:7px;border:0;
background:radial-gradient(130% 150% at 50% 0,#3a2805 0,#1f1503 75%);box-shadow:inset 0 0 0 1px #5a400a,inset 0 0 10px rgba(0,0,0,.6)}
body.solo .mtk .mtk-lcd b{font:400 24px/32px 'VT323',monospace;letter-spacing:.04em;color:#ffc23d;text-shadow:0 0 2px #ffb000,0 0 10px rgba(255,190,40,.55);min-width:0;text-align:left}
body.solo .mtk .mtk-lcd small{order:-1;font:400 13px/1 'VT323',monospace;letter-spacing:.08em;color:#e0a520;text-shadow:0 0 6px rgba(255,190,40,.4)}
body.solo .mtk .mtk-leds{gap:4px;padding:0 10px 0 6px;height:32px;align-items:center}
body.solo .mtk .mtk-leds i,body.solo .mtk .mtk-leds i.acc{width:4px;height:14px;border-radius:2px;background:rgba(255,201,61,.16);box-shadow:none;transition:background .08s,box-shadow .08s,height .08s}
body.solo .mtk .mtk-leds i.acc{height:18px}
body.solo .mtk .mtk-leds i.lit{background:#ffc93d;box-shadow:0 0 8px rgba(255,190,40,.85)}
body.solo .mtk .mtk-leds i.acc.lit{background:#fff1c4;box-shadow:0 0 10px rgba(255,200,60,1)}
body.solo .mtk.on{border-color:#a0700a;box-shadow:0 0 12px -4px rgba(246,168,1,.6)}
@media (max-width:620px){ body.solo #kbTools .mtk{justify-content:center} }
/* LCD tags: TR / OCT next to SUS */
.lcd-top .lcd-tags{display:inline-flex;align-items:center;gap:6px;opacity:1}
.lcd-top .lcd-tr{padding:0 4px;border:1px solid currentColor;border-radius:3px;line-height:13px;opacity:1}
.lcd-top .lcd-tr[hidden]{display:none}
/* Advanced panel */
.adv-wrap{display:none}
body.solo .adv-wrap{display:inline-flex;position:relative;margin-left:auto}
html:not(.ffo-advanced:where(:not(.fft-advanced))) body.solo .adv-wrap~.eq-wrap{margin-left:0!important}
/* the right-hand group (Advanced, Mix, Key light, nameplate) stays pushed right whichever of them are switched off */
html:not(.ffo-advanced:where(:not(.fft-advanced))) body.solo .adv-wrap~.kl-wrap{margin-left:0}
html:not(.ffo-advanced:where(:not(.fft-advanced))) body.solo .adv-wrap~.rig-plate,html:not(.ffo-mix:where(:not(.fft-mix))) body.solo .eq-wrap~.rig-plate{margin-left:14px}
.tools-br{display:none}
body.solo.tools-two .tools-br{display:block;flex:0 0 100%;height:0}
body.solo.tools-two #kbTools{row-gap:0;margin-bottom:14px}
body.solo.tools-two #kbTools>*:not(.tools-br){margin-bottom:14px}
body.solo.tools-two .rig-plate{margin-left:auto!important}
body.solo.tools-two .adv-wrap,body.solo.tools-two .eq-wrap,body.solo.tools-two .kl-wrap{margin-left:0!important}
.adv-btn{position:relative}
.adv-btn svg{flex:none;width:18px;height:18px;color:#bfb6a4}
@media (min-width:621px){body.solo .adv-btn{width:44px;padding:0;justify-content:center}body.solo .adv-btn>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}}
.adv-dot{display:none;position:absolute;top:6px;right:6px;width:8px;height:8px;border-radius:50%;background:var(--yellow);box-shadow:0 0 6px rgba(246,168,1,.8)}
.adv-btn.set .adv-dot{display:block}
.adv-card{max-width:560px;outline:none}
.adv-sec{margin:2px 2px 10px;font:800 11px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--yellow)}
.adv-pane{display:grid;gap:10px}
.adv-pane[hidden]{display:none}
.bg-row{display:flex;align-items:center;gap:14px}
.bg-thumb{flex:0 0 auto;width:112px;height:64px;border-radius:10px;border:1px dashed #4a443b;background:#0b0a09 center/cover no-repeat;color:#8a8170;font:700 26px/1 var(--body);cursor:pointer;display:grid;place-items:center;padding:0}
.bg-thumb.has{border:1px solid #4a443b}.bg-thumb.has span{display:none}
.bg-acts{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.bg-btn{display:inline-flex;align-items:center;justify-content:center;height:36px;padding:0 16px;border-radius:999px;border:1px solid #4a443b;background:#1c1a17;color:var(--cream);font:800 13.5px var(--body);cursor:pointer;white-space:nowrap}
.bg-btn:hover{border-color:var(--yellow)}.bg-btn:focus-within{outline:2px solid var(--yellow);outline-offset:2px}
.bg-rm[hidden]{display:none}
.bg-rm{background:none;color:#a89f8c;border-color:transparent;height:28px;padding:0 6px;text-decoration:underline;text-underline-offset:3px}
.adv-pane[data-p="lk"]:not(.has-bg) .bg-opt{opacity:.45;pointer-events:none}
.tch-bg{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;border-radius:inherit}
.tch-bg i{position:absolute;inset:0;background:var(--bgi) center/cover no-repeat}
.tch-bg b{position:absolute;inset:0;background:#000;opacity:var(--bgd,.45)}
body.solo .hero.bg-on,body.solo .kb-wrap.bg-on{isolation:isolate}
body.solo .hero.bg-on{background:#000}
html.ffo-weighted:where(:not(.fft-weighted)) .adv-wt,html.ffo-labels:where(:not(.fft-labels)) .adv-lbl,html.ffo-touchmeter:where(:not(.fft-touchmeter)) .adv-tm,html.ffo-touchmeter:where(:not(.fft-touchmeter)) .lcd-tm,html.ffo-background:where(:not(.fft-background)) .lk-bg,html.ffo-background:where(:not(.fft-background)) .tch-bg{display:none!important}
.adv-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px 16px;background:#11100e;border:1px solid #2e2b26;border-radius:14px;padding:12px 14px}
.adv-l h3{margin:0;font:600 17px/1.2 var(--display);color:var(--cream)}
.adv-l p{margin:2px 0 0;font-size:13.5px;line-height:1.4;color:#a89f8c}
.adv-step{display:inline-flex;align-items:center;gap:4px;padding:3px;border-radius:999px;background:#1d1b18;border:1px solid #34302a}
.adv-pm{width:36px;height:36px;border-radius:50%;border:0;background:#2c2924;color:var(--cream);font:800 20px/1 var(--body);cursor:pointer;display:grid;place-items:center;padding:0}
.adv-pm:hover:not(:disabled){background:#3a3630}
.adv-pm:disabled{opacity:.3;cursor:default}
.adv-val{min-width:46px;text-align:center;font:600 21px/36px var(--display);color:var(--yellow);font-variant-numeric:tabular-nums}
.adv-touch{grid-template-columns:1fr}
.adv-seg{display:flex;gap:4px;padding:4px;background:#1d1b18;border:1px solid #34302a;border-radius:999px}
.adv-seg button{flex:1 1 0;height:34px;border:0;border-radius:999px;background:none;color:#cfc6b4;font:800 13.5px var(--body);cursor:pointer}
.adv-seg button[aria-checked="true"]{background:var(--yellow);color:#111}
.adv-vel{display:grid;grid-template-columns:60px 1fr;gap:14px;align-items:center}
.adv-curve{width:60px;height:60px;display:block}
.adv-meter{display:grid;grid-template-columns:auto auto 1fr auto auto;align-items:center;gap:8px;font-size:12.5px;color:#a89f8c;font-weight:700}
.adv-meter b{font:600 17px/1 var(--display);color:var(--yellow);min-width:3ch;text-align:right;font-variant-numeric:tabular-nums}
.adv-meter i{position:relative;height:8px;border-radius:99px;background:#2c2924;overflow:hidden}
.adv-meter em{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,#c98a06,#F6A801);border-radius:99px;transition:width .08s}
.adv-stop{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:999px;border:1px solid #7a1f1a;background:#3a1412;color:#ffd6d2;font:800 14px var(--body);cursor:pointer;white-space:nowrap}
.adv-stop:hover{background:#4a1714}
.adv-stop.done{background:#8b1e17;border-color:#8b1e17;color:#fff}
.adv-reset{justify-self:center;margin-top:2px;border:0;background:none;color:#a89f8c;font:700 13px var(--body);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.adv-reset:hover{color:var(--cream)}
@media (max-width:620px){
.adv-row:not(.adv-touch){grid-template-columns:1fr auto}
.adv-panic{grid-template-columns:1fr}.adv-stop{justify-content:center}
.adv-meter{grid-template-columns:auto auto 1fr;row-gap:6px}.adv-meter span:nth-of-type(2),.adv-meter b:nth-of-type(2){display:none}
body.solo #kbTools .adv-wrap{order:6;flex:1 1 100%;margin-left:0!important;min-width:0}
body.solo #kbTools .lp{flex:1 1 100%!important}
html:not(.ffo-chordtrail:where(:not(.fft-chordtrail))) body.solo #kbTools .lp{flex:1 1 calc(100% - 52px)!important}
body.solo #kbTools .adv-wrap .kl-btn{width:100%;justify-content:center}
}
.adv .hc-tabs{margin-bottom:12px}
.lv-meter{display:grid;grid-template-columns:14px 1fr;column-gap:8px;position:relative;padding-bottom:16px}
.lv-lr{display:grid;grid-template-rows:1fr 1fr;align-items:center;font:800 11px/1 var(--body);color:#8a8172}
.lv-cv{width:100%;height:34px;display:block}
.lv-scale{position:absolute;left:22px;right:0;bottom:0;height:12px;font:700 10px/1 var(--body);color:#6b6458}
.lv-scale s{position:absolute;text-decoration:none;transform:translateX(-50%)}
.lv-scale s:first-child{transform:none}.lv-scale s:last-child{transform:translateX(-100%)}
.lv-status{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font:800 12.5px var(--body);color:#a89f8c}
.lv-led{display:inline-flex;align-items:center;gap:6px}
.lv-led i{width:9px;height:9px;border-radius:50%;background:#3d372e}
.lv-led.on i{background:#ffb300;box-shadow:0 0 8px rgba(255,179,0,.9)}
.lv-clip.on i{background:#ff3b2e;box-shadow:0 0 9px rgba(255,59,46,.95)}
.lv-pk{margin-left:auto}.lv-pk b{font:600 16px var(--display);color:var(--yellow);font-variant-numeric:tabular-nums}
.lv-range{width:100%;accent-color:#F6A801;height:28px}
.lv-lat{font:600 22px var(--display);color:var(--yellow);font-variant-numeric:tabular-nums;white-space:nowrap}
.lv-lat[data-q="good"]{color:#9fd36b}.lv-lat[data-q="slow"]{color:#ff8a4d}
/* MIDI connected: the Connect button steps aside, Listen takes its space */
body.solo.midi-live .rig-panel .kb-side .midi-btn{display:none!important}
body.solo.midi-live .rig-panel .kb-side .listen-btn{grid-column:1/3!important}
/* Connect MIDI / Listen: even inner spacing, label never touches the edge */
body.solo .rig-panel .kb-side .midi-btn,body.solo .rig-panel .kb-side .listen-btn{padding:0 10px!important;gap:7px!important;min-width:0;overflow:hidden}
body.solo .rig-panel .kb-side .midi-btn .dot{display:none}
@media (min-width:1241px){body.solo:not(.midi-live) .rig-panel .kb-side{grid-template-columns:max-content minmax(0,1fr) 40px!important}}
body.solo.np-tight:not(.midi-live) .rig-panel .kb-side .listen-btn{gap:0!important;justify-content:center}
body.solo.np-tight:not(.midi-live) .rig-panel .kb-side .listen-btn span{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important}
body.solo .rig-panel .kb-side .midi-btn #midiLabel{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
/* MIDI learn tags sit centred above the knob instead of over its ring */
.k-cc{top:-4px!important;bottom:auto;right:auto!important;left:50%;transform:translate(-50%,-100%);font-size:9.5px!important;padding:2px 6px!important;white-space:nowrap}
body:not(.ml-on) .k-cc{display:none!important}
body.ml-on .kn-wrap:has(>.k-cc:not([hidden])){margin-top:18px}
.kn-wrap{position:relative}
/* ch1 feature switches (Google Sheet "CH ONE Features"): a switched-off feature is hidden completely */
html.ffo-pad:where(:not(.fft-pad)) .mix-strip:has(#ledPad),html.ffo-pad:where(:not(.fft-pad)) #padBtn,
html.ffo-synth:where(:not(.fft-synth)) .mix-strip.mix-synth,
html.ffo-looper:where(:not(.fft-looper)) #looper,html.ffo-looper:where(:not(.fft-looper)) #lpLanes,
html.ffo-song:where(:not(.fft-song)) #sgTg,html.ffo-song:where(:not(.fft-song)) .sg-panel,
html.ffo-learn:where(:not(.fft-learn)) #lnTg,html.ffo-learn:where(:not(.fft-learn)) .ln-panel,
html.ffo-scales:where(:not(.fft-scales)) #scTg,html.ffo-scales:where(:not(.fft-scales)) .sc-panel:not(.ln-panel):not(.sg-panel),
html.ffo-record:where(:not(.fft-record)) #recBtn,html.ffo-record:where(:not(.fft-record)) #recTake,
html.ffo-metronome:where(:not(.fft-metronome)) #mtk,
html.ffo-advanced:where(:not(.fft-advanced)) .adv-wrap,
html.ffo-midilearn:where(:not(.fft-midilearn)) .ml-ctl,
html.ffo-keylight:where(:not(.fft-keylight)) .kl-wrap,
html.ffo-mix:where(:not(.fft-mix)) #eqWrap,
html.ffo-listen:where(:not(.fft-listen)) #listenBtn,
html.ffo-keymap:where(:not(.fft-keymap)) #kmTg{display:none!important}
html.ffo-keyedit:where(:not(.fft-keyedit)) #kmEd,html.ffo-keymap:where(:not(.fft-keymap)) #kmEd{display:none!important}
.kme{position:fixed;inset:0;z-index:9500;display:grid;place-items:center;padding:16px;background:rgba(8,7,6,.62);backdrop-filter:blur(3px)}
.kme[hidden]{display:none}
.kme-card{width:min(860px,100%);max-height:calc(100vh - 32px);overflow:auto;box-sizing:border-box;padding:20px 22px 18px;border-radius:20px;background:linear-gradient(180deg,#24211c,#171512);border:1px solid #3a3630;border-top:3px solid var(--kl,#F6A801);box-shadow:0 30px 70px rgba(0,0,0,.7);color:#FBF6EC;font:600 13px/1.45 Nunito,system-ui,sans-serif;display:flex;flex-direction:column;gap:14px}
.kme-h{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.kme-h h2{margin:0 0 3px;font:700 22px/1.15 Fredoka,var(--display),sans-serif;color:var(--kl,#F6A801)}
.kme-h p{margin:0;color:#bfb6a4;max-width:60ch}
.kme-x{flex:none;width:36px;height:36px;border-radius:50%;border:1px solid #3a3630;background:#1d1b18;color:#cfc6b4;font:400 22px/1 sans-serif;cursor:pointer}
.kme-pre{display:flex;flex-wrap:wrap;gap:6px}
.kme-pre button{height:32px;padding:0 14px;border-radius:999px;border:1px solid #3a3630;background:#1d1b18;color:#cfc6b4;font:800 12.5px/1 Nunito,sans-serif;cursor:pointer}
.kme-pre button[aria-checked="true"]{background:var(--kl,#F6A801);border-color:var(--kl,#F6A801);color:#111}
.kme-pre button:disabled{cursor:default}.kme-pre button:disabled:not([aria-checked="true"]){opacity:.45}
.kme-stage{position:relative;display:flex;flex-direction:column;gap:22px;padding:16px;border-radius:14px;background:radial-gradient(100% 120% at 50% 0,#1f1c17,#0f0e0c);border:1px solid #2e2b26}
.kme-kb{display:flex;flex-direction:column;gap:6px;align-items:flex-start;--kc:clamp(17px,calc((min(100vw,860px) - 140px)/14.6),46px)}
@media (max-width:620px){.kme-row{gap:3px;padding-left:calc(var(--ind)*(var(--kc) + 3px))}.kme-kb{gap:3px}.kc{border-radius:5px}.pk em{font-size:7.5px;padding:1px;margin-bottom:3px}.kme-card{padding:16px 14px}.kme-stage{padding:10px}}
.kme-row{display:flex;gap:6px;padding-left:calc(var(--ind)*(var(--kc) + 6px))}
.kc{position:relative;width:var(--kc);height:var(--kc);padding:0;border-radius:8px;border:1px solid #3a3630;background:linear-gradient(180deg,#2c2924,#1b1916);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 3px 0 #0b0a09,0 4px 6px rgba(0,0,0,.4);color:#8a8273;cursor:grab;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;touch-action:none;transition:transform .12s,box-shadow .12s}
.kc b{font:900 calc(var(--kc)*.32)/1 Nunito,sans-serif}
.kc i{font:400 calc(var(--kc)*.3)/1 'VT323',monospace;font-style:normal;color:#ffc23d;text-shadow:0 0 6px rgba(255,190,40,.45);min-height:1em}
.kc.has{border-color:#5a400a;color:#FBF6EC;background:linear-gradient(180deg,#3a2c12,#1f1709)}
.kc.has.blk{background:linear-gradient(180deg,#25211a,#0e0c09)}
.kc.sel{border-color:var(--kl,#F6A801);box-shadow:0 0 0 2px var(--kl,#F6A801),0 0 16px rgba(246,168,1,.55),0 3px 0 #0b0a09;transform:translateY(-2px)}
.kc.hit,.pk.hit{animation:kmeHit .45s ease-out}
@keyframes kmeHit{0%{box-shadow:0 0 0 2px #ffd36b,0 0 22px rgba(246,168,1,.9)}100%{box-shadow:none}}
.kc:focus-visible,.pk:focus-visible,.kme button:focus-visible{outline:2px solid var(--kl,#F6A801);outline-offset:2px}
.kme-pi{position:relative;height:clamp(90px,15vw,130px)}
.pi-w{display:flex;height:100%}
.pk{position:relative;padding:0;cursor:pointer;display:flex;flex-direction:column;justify-content:flex-end;align-items:center}
.pk.pw{flex:1 1 0;margin:0 1px;border:0;border-radius:0 0 6px 6px;background:#FBF6EC;color:#111}
.pk.pb{position:absolute;top:0;width:calc(100%/var(--nw)*.6);height:58%;z-index:2;border:0;border-radius:0 0 5px 5px;background:linear-gradient(180deg,#1d1b18,#0a0908);color:#FBF6EC}
.pk em{font:900 10px/1 Nunito,sans-serif;font-style:normal;margin-bottom:6px;padding:2px 3px;border-radius:4px;letter-spacing:.02em;text-align:center;max-width:100%;overflow:hidden}
.pk.has em{background:var(--kl,#F6A801);color:#111}
.pk span{position:absolute;bottom:-17px;font:800 10px/1 Nunito,sans-serif;color:#8a8273}
.pk.home::after{content:"";position:absolute;top:6px;left:50%;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:var(--kl,#F6A801);box-shadow:0 0 6px var(--kl,#F6A801)}
.pk.pw.over{background:#ffe7a8}.pk.pb.over{background:#5a400a}
.kme-cord{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;opacity:0;transition:opacity .2s}
.kme-cord.on{opacity:1}
.kme-cord .kc-line{fill:none;stroke:#F6A801;stroke-width:3;stroke-linecap:round}
.kme-cord .kc-glow{fill:none;stroke:rgba(246,168,1,.35);stroke-width:10;stroke-linecap:round;filter:blur(3px)}
.kme-cord .kc-end{fill:#ffd36b;filter:drop-shadow(0 0 6px #F6A801)}
.kme-f{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.kme-say{flex:1 1 200px;color:#ffc93d;min-height:1.4em}
.kme-clr,.kme-rst,.kme-done{height:38px;padding:0 18px;border-radius:999px;font:800 13.5px/1 Nunito,sans-serif;cursor:pointer}
.kme-rst{border:1px solid #3a3630;background:transparent;color:#cfc6b4;margin-left:auto}.kme-rst[hidden]{display:none}.kme-rst:hover,.kme-clr:hover{border-color:#5a544a;color:#FBF6EC}
.kme-clr{border:1px solid #3a3630;background:transparent;color:#cfc6b4}
.kme-done{border:0;background:var(--kl,#F6A801);color:#111}
html.ffo-liquid:where(:not(.fft-liquid)) [data-wave="liquid"]{display:none!important}
html.ffo-intones:where(:not(.fft-intones)) .in2-tone,html.ffo-intones:where(:not(.fft-intones)) .vx-tone{display:none!important}
.in2-pop .in2-tone{display:flex;flex-wrap:wrap;gap:5px;margin:2px 10px 8px;padding-bottom:9px;border-bottom:1px solid #2c2a26}.in2-pop .in2-tone span{flex-basis:100%;font:800 11px/1 var(--body);color:#a99f8e;margin:2px}
.in2-pop .in2-tone[hidden],.vx-tone[hidden]{display:none!important}
body .mix-in2.in2-amp .in2-vk:has([data-ik="a"]){display:flex!important}
.in-ren{display:inline-grid;place-items:center;width:18px;height:18px;margin-left:6px;border-radius:5px;color:#857c6b;cursor:pointer;vertical-align:middle;opacity:.7}
.in-ren:hover,.in-ren:focus-visible{color:var(--kl,#F6A801);opacity:1;background:rgba(255,255,255,.06)}
.in-editing{outline:1px solid var(--kl,#F6A801);outline-offset:2px;border-radius:4px;padding:0 3px;cursor:text;min-width:3ch;display:inline-block;background:#141311}
body.solo.mob .in-ren{display:none}
/* panels: room to breathe. The knob row spreads across the whole card with a little padding at each end */
html body.solo:not(.mob) .rig-panel .mix>.mix-strip:not(.ms-col):not(.mix-drums):not(.mix-organ)>.ms-k{box-sizing:border-box;width:100%;padding:0 6px;justify-content:space-between!important;gap:10px!important}
html body.solo:not(.mob) .rig-panel .mix>.mix-strip:not(.ms-col).mix-organ>.ms-k{padding-left:6px}
/* Input 1: Pan and EQ sit on the name row, to the left of the fold button */
.ms-hx{display:none}
html body.solo:not(.mob) .rig-panel .mix>.mix-strip:not(.ms-col)>.ms-hx{display:flex;align-items:flex-start;gap:12px;position:absolute;top:4px;right:40px;z-index:3}
html:not(.ffo-panels:where(:not(.fft-panels))) body.solo:not(.mob) .rig-panel .mix>.mix-strip.pn-has:not(.ms-col)>.ms-hx{right:66px} /* clear of both the collapse and the close button */
html body.solo:not(.mob) .rig-panel .mix>.mix-strip>.ms-hx .kn-wrap{display:flex;flex-direction:column;align-items:center;gap:2px;align-self:auto}
html body.solo:not(.mob) .rig-panel .mix>.mix-strip>.ms-hx .knob{zoom:.74}
html body.solo:not(.mob) .rig-panel .mix>.mix-strip>.ms-hx .knob .k-num{zoom:1.3}
html body.solo:not(.mob) .rig-panel .mix>.mix-strip>.ms-hx .cx-b{width:32px;height:32px;margin:4px 3px 2px}
html body.solo:not(.mob) .rig-panel .mix>.mix-strip>.ms-hx .k-lab{font-size:9px}
html.ffo-pan:where(:not(.fft-pan)) .ms-hx .kn-pan{display:none!important}
html.ffo-chfx:where(:not(.fft-chfx)) .kn-cx,html.ffo-chfx:where(:not(.fft-chfx)) .cx-pop{display:none!important}
/* CH Grand (switch: chgrand) */
html.ffo-chgrand:where(:not(.fft-chgrand)) [data-pv="chg"],html.ffo-chgrand:where(:not(.fft-chgrand)) .chg-main,html.ffo-chgrand:where(:not(.fft-chgrand)) .chg-pop{display:none!important}
.mix-strip:not(.chg-sel) .chg-main{display:none!important}
.mix-strip.chg-sel .ms-k>.kn-wrap:has(>.knob[data-ch="piano"]){display:none!important}
.mix-strip.chg-sel .ms-k{align-items:stretch}
.chg-mw{align-self:stretch;justify-content:flex-end}.chg-mw .cx-b{margin:auto 5px}
/* the CH Grand row stays snug: six knobs, More, Pan and EQ sit close together, a size smaller than the two-knob Concert row, so choosing
CH Grand never makes the Piano card wide enough to shrink every panel (before: 535 px wide, over the row by a few px, so all panels zoomed down) */
html body.solo:not(.mob) .rig-panel .mix>.mix-strip.chg-sel:not(.ms-col):not(.mix-drums):not(.mix-organ)>.ms-k{gap:6px!important;justify-content:flex-start!important}
html body.solo:not(.mob) .rig-panel .mix>.mix-strip.chg-sel:not(.ms-col)>.ms-k>.kn-pan{margin-left:auto}
body.solo .rig-panel .mix-strip.chg-sel .chg-main .knob,body.solo .rig-panel .mix-strip.chg-sel .chg-main .knob svg{width:54px;height:54px}
body.solo .rig-panel .mix-strip.chg-sel .chg-main .knob::before{inset:10px}
body.solo .rig-panel .mix-strip.chg-sel .chg-main .k-lab{font-size:9.5px;letter-spacing:.07em}
body.solo .rig-panel .mix-strip.chg-sel .chg-main .k-num{font-size:9.5px}
.chg-pop{position:fixed;right:auto;bottom:auto;z-index:80;width:368px;max-height:calc(100dvh - 20px);overflow:auto;overscroll-behavior:contain}
.chg-pop .kl-h{position:relative;padding-right:30px;margin-bottom:4px}.chg-pop .chg-x{position:absolute;top:-4px;right:-4px}
.chg-pre{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.chg-pre button{height:34px;border-radius:12px;border:1px solid #3a3630;background:#262420;color:#bfb6a4;font:800 12.5px var(--body);cursor:pointer;-webkit-appearance:none;appearance:none}
.chg-pre button:hover{border-color:#5a5448;color:var(--cream)}
.chg-pre button[aria-checked="true"]{background:var(--yellow);border-color:var(--yellow);color:var(--black)}
.kl-pop.eq-pop.chg-pop{width:368px}
.chg-pop section.chg-sec{display:block;padding:0;margin:12px 0 0;min-height:0;height:auto;border-top:1px solid #2c2a26;background:none;scroll-margin:0}
.chg-sh{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:10px}
.chg-st{flex:1 1 auto;display:flex;align-items:center;gap:8px;min-height:34px;background:none;border:0;padding:0;color:var(--cream);font:600 16px var(--display);cursor:pointer;text-align:left;-webkit-appearance:none;appearance:none}
.chg-st svg{color:#a9a091;transition:transform .15s}.chg-st[aria-expanded="true"] svg{transform:rotate(180deg)}
.chg-sb{padding-top:8px}.chg-sb[hidden]{display:none}
.chg-pop .eq-k{gap:6px 4px;padding:4px 0 6px}
.chg-pop .chg-k4{grid-template-columns:repeat(4,minmax(0,1fr))}.chg-pop .chg-k1{grid-template-columns:minmax(0,1fr)}
.chg-pop .chg-sb .kl-l{margin:6px 0 2px;text-align:center}
.chg-pop .chg-k3{grid-template-columns:repeat(3,minmax(0,1fr))}
.chg-pop .chg-k2{grid-template-columns:repeat(2,minmax(0,1fr));padding-left:16%;padding-right:16%}
.chg-pop .knob,.chg-pop .knob svg{width:58px;height:58px}
.chg-pop .knob .k-num{font-size:10.5px}
.chg-pop .k-lab{max-width:80px;text-align:center;line-height:1.25;font-size:10px!important;letter-spacing:.06em!important}
.chg-row{display:flex;align-items:center;gap:10px;margin:2px 0 8px}
.chg-rl{flex:0 0 58px;color:#a9a091;font-weight:900;font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.chg-pop .chg-seg{flex:1 1 auto;height:34px;padding:3px}
.chg-pop .chg-seg button{height:26px;padding:0 6px;font-size:12px}
.chg-fx{border:1px solid #2c2a26;border-radius:14px;padding:10px 10px 4px;margin:0 0 8px;background:#171512}
.chg-fx:not(.on) .eq-k,.chg-fx:not(.on) .chg-row{opacity:.45}
.chg-fh{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.chg-fh b{font:600 15px var(--display);color:var(--cream)}
.chg-note{margin:4px 0 0;color:#8a8170;font-weight:700;font-size:12px;line-height:1.4}
.chg-dim{opacity:.4}
.mix.learning .knob[data-cg]::after{display:none}
html body.solo.mob .rig-panel .mob-sheet .mix-strip.mob-sel.chg-sel .ms-k{display:flex!important;flex-wrap:wrap!important;justify-content:center!important;align-items:stretch!important;gap:14px 4px!important}html body.solo.mob .rig-panel .mob-sheet .mix-strip.mob-sel.chg-sel .ms-k>.kn-wrap{flex:0 0 calc(25% - 3px);min-width:0}
@media (max-width:620px){.kl-pop.eq-pop.chg-pop{position:fixed;left:16px!important;right:16px;top:auto!important;bottom:calc(88px + env(safe-area-inset-bottom,0px));width:auto;max-height:calc(100dvh - 120px);overflow:auto;z-index:400}.chg-pop .knob,.chg-pop .knob svg{width:54px;height:54px}}
body.solo .rig-panel .kn-cx{justify-content:flex-end;align-self:stretch;display:flex;flex-direction:column;align-items:center;gap:4px}
.cx-b{width:40px;height:40px;margin:5px 5px 4px;border-radius:50%;border:1px solid #3a3630;background:radial-gradient(circle at 50% 35%,#2a2824,#141311);color:#a89f8c;display:grid;place-items:center;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 2px 6px rgba(0,0,0,.5);padding:0;transition:color .15s,border-color .15s,box-shadow .15s}
.cx-b:hover{color:var(--cream);border-color:#5a5448}
.cx-b.shaped{color:var(--yellow);border-color:var(--yellow);box-shadow:0 0 10px color-mix(in srgb,var(--yellow) 35%,transparent),inset 0 1px 0 rgba(255,255,255,.06)}
.cx-b[aria-pressed="true"]{color:var(--black,#111);background:var(--yellow);border-color:var(--yellow)}
.cx-pop{position:fixed;right:auto;bottom:auto;width:316px;z-index:80}
.cx-pop{max-height:calc(100dvh - 20px);overflow-y:auto;scrollbar-width:thin}
.cx-pop .eq-k.cx-st{grid-template-columns:repeat(2,minmax(0,1fr));width:66.7%;margin-left:auto;margin-right:auto}
.cx-pop .cx-dt button{white-space:nowrap;padding:0 4px!important;font-size:13px!important}
.cx-pop .cx-dt{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;height:auto!important;padding:4px!important;border-radius:14px!important}
.cx-pop .kl-h{position:relative;padding-right:30px}
.cx-pop .cx-x{position:absolute;top:-4px;right:-4px}
.cx-pop .eq-k .knob .k-ctr{stroke:#5a5448;stroke-width:2}
.cx-pop .knob.off .k-num{color:#a89f8c}
.cx-pop .cx-sp{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;height:auto!important;padding:4px!important;border-radius:14px!important}
.cx-pop .cx-sp button{height:28px!important;font-size:12px!important;padding:0 4px!important;border-radius:10px!important;text-align:center;justify-content:center}
@media (max-width:620px){.kl-pop.eq-pop.cx-pop{position:fixed;left:16px!important;right:16px;top:auto!important;bottom:calc(88px + env(safe-area-inset-bottom,0px));width:auto;max-height:calc(100dvh - 120px);overflow:auto;z-index:400}}
html.ffo-reverbs:where(:not(.fft-reverbs)) .vb-seg{display:none!important}
.vd-dev{grid-column:1/-1;height:38px;border-radius:10px;border:1px solid #3a3630;background:#1c1a17;color:var(--cream);font:700 13.5px var(--body);padding:0 10px}
/* multiple camera views, each with its own zoom/pan/opacity/key (switches: multicam, camfx) */
.vd-tabs{grid-column:1/-1;display:flex;gap:6px;flex-wrap:wrap;margin-bottom:4px}
.vd-tabs button{height:28px;padding:0 13px;border-radius:999px;border:1px solid #34302a;background:#1d1b18;color:#bfb6a4;font:800 12.5px/1 var(--body);cursor:pointer}
.vd-tabs button[aria-selected="true"]{background:var(--yellow);border-color:var(--yellow);color:#111}
.vd-tabs .vd-addcam{width:28px;padding:0;font-size:16px;font-weight:900}
.vd-pan{grid-column:1/-1;display:flex;gap:16px}.vd-pan input{flex:1 1 0}
.vd-cropq .bg-btn{font-size:14px}
.vd-crop{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 18px}
.vd-crop label{display:grid;grid-template-columns:62px minmax(0,1fr) 52px;align-items:center;gap:10px;font:800 15px var(--body);color:#d4cab6}
.vd-crop b{font:800 15px var(--body);color:var(--cream);text-align:right;font-variant-numeric:tabular-nums}
.vd-cropq{grid-column:1/-1;display:flex;gap:8px}
body.solo .adv-pane .vd-tabs{grid-column:1/-1}
.vd-crop{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:900px){.vd-crop{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.vd-crop{grid-template-columns:minmax(0,1fr)}}
html.ffo-multicam:where(:not(.fft-multicam)) .vd-opt-multi{display:none!important}
html.ffo-camfx:where(:not(.fft-camfx)) .vd-fx{display:none!important}
.cam.cam-keyed{background:transparent;box-shadow:none}
.vd-dev[hidden],.vd-pick[hidden]{display:none}
.vd-pick{grid-column:1/-1;justify-self:start}
.adv-pane[data-p="vd"]:not(.vd-live) .vd-opt{opacity:.45;pointer-events:none}
.vd-cred{margin:6px 2px 0;font-size:11.5px;color:#8a8170;text-align:center}
html.ffo-video:where(:not(.fft-video)) .adv-vd-tab,html.ffo-video:where(:not(.fft-video)) .adv-pane[data-p="vd"],html.ffo-video:where(:not(.fft-video)) .cam{display:none!important}
.cam{position:fixed;z-index:60;width:var(--cw,280px);aspect-ratio:16/9;border-radius:22px;overflow:hidden;background:#0b0a09;box-shadow:0 0 0 2px #2c2a26,0 0 0 4px #0b0a09,0 18px 40px rgba(0,0,0,.55);cursor:grab;touch-action:none;user-select:none}
.cam[hidden]{display:none}.cam.drag{cursor:grabbing}
.cam canvas{display:block;width:100%;height:100%}
.cam .cam-msg{position:absolute;inset:0;display:grid;place-items:center;padding:12px;text-align:center;color:#cfc6b4;font:700 13px var(--body);background:rgba(11,10,9,.75)}
.cam .cam-msg[hidden]{display:none}
.cam .cam-x{position:absolute;top:8px;right:8px;width:26px;height:26px;border-radius:50%;border:0;background:rgba(0,0,0,.55);color:#fff;display:grid;place-items:center;cursor:pointer;opacity:0;transition:opacity .2s}
.cam:hover .cam-x{opacity:1}@media (hover:none){.cam .cam-x{opacity:.8}}
.mt-grv{display:none}
body.solo .mt-grv{display:block;margin-top:2px}
.mt-gl{font:900 11px var(--body);letter-spacing:.12em;text-transform:uppercase;color:#a9a091;margin:10px 0 6px}
.mt-gs{display:flex!important;flex-wrap:wrap;gap:6px}.mt-gs button{flex:1 1 calc(33.3% - 6px);height:34px;font-size:13.5px;border-radius:10px;padding:0 6px}
body.solo .metro{max-height:calc(100vh - 290px)!important;overscroll-behavior:contain}
html body.solo.mob .metro{max-height:calc(100vh - 166px - env(safe-area-inset-bottom,0px))!important} /* phones: the metronome and tuner use the height above the bottom bar, so Start is in view */
.mt-cred{margin:8px 0 0;font-size:11px;color:#8a8170;text-align:center}
html.ffo-arabic:where(:not(.fft-arabic)) .mt-ar,html.ffo-lofi:where(:not(.fft-lofi)) .mt-lf,html.ffo-indian:where(:not(.fft-indian)) .mt-ind,html.ffo-arabic:where(:not(.fft-arabic)).ffo-lofi:where(:not(.fft-lofi)).ffo-indian:where(:not(.fft-indian)) .mt-grv{display:none!important}
html.ffo-indian:where(:not(.fft-indian)) .ind-only{display:none!important}
.vb-seg{margin:0 0 10px}.vb-seg button{flex:1 1 auto!important;font-size:12px!important;padding:0 7px!important;min-width:0}
html.ffo-listen:where(:not(.fft-listen)) body.solo .rig-panel .kb-side .midi-btn{grid-column:1/3!important}
/* ch1: no Listen, no Note Houses; Staff lives in Advanced > Look */
body.solo #kidsTg,body.solo #staffTg,body.solo #susInd{display:none!important}
body.solo .rig-panel #listenBtn{display:none!important}
html:not(.ffo-listen:where(:not(.fft-listen))) body.solo .kb-switches>#listenBtn{order:199;display:inline-flex!important;align-items:center;justify-content:center;gap:0;width:32px;height:28px;padding:0;margin:0 0 0 auto;border-radius:999px;border:1px solid #3a3630;background:#1d1b18;color:#cfc6b4;flex:none;cursor:pointer}
html:not(.ffo-listen:where(:not(.fft-listen))) body.solo .kb-switches>#listenBtn+#midiBtn,html:not(.ffo-listen:where(:not(.fft-listen))) body.solo .kb-switches>#listenBtn~#midiBtn{margin-left:0!important}
body.solo .kb-switches>#listenBtn #listenLabel{display:none}body.solo .kb-switches>#listenBtn .ls-ic{width:18px;height:18px}
body.solo .kb-switches>#listenBtn:hover{border-color:#5a544a;color:#FBF6EC}
body.solo .kb-switches>#listenBtn.on{background:#F6A801;border-color:#F6A801;color:#111;box-shadow:0 0 0 3px rgba(246,168,1,.22)}
body.solo .kb-switches>#listenBtn.on .ls-ic{animation:lsPulse 1.2s ease-in-out infinite}@keyframes lsPulse{50%{transform:scale(.86)}} /* SUS already lights on the chord screen */
/* once MIDI is connected the chord screen fills the whole panel */
body.solo.midi-live .rig-panel .kb-side{align-self:stretch;grid-template-rows:minmax(0,1fr)}
body.solo.midi-live .rig-panel .kb-side .lcd{grid-row:1/-1;align-self:stretch;height:auto;display:flex;flex-direction:column;justify-content:center}
body.solo .rig-panel .kb-side .midi-btn{grid-column:1/-1!important;justify-self:stretch}
body.solo .kb-switches .hc-btn{display:inline-flex;order:100;flex:none;width:36px;height:36px;padding:0;border-radius:50%;justify-content:center;align-items:center;color:var(--yellow);background:#1f1d19;border:1px solid #3a3630;cursor:pointer}
body.solo .kb-switches .hc-btn svg{width:18px;height:18px}
/* Record in the top row (piano page): dark red */
body.solo .kb-switches .rec-top{order:12;width:auto;height:28px;flex-direction:row;gap:7px;padding:0 12px 0 10px;border:1px solid #5a2622;background:transparent;color:#e8c4c0;font:800 14px var(--body);animation:none}
body.solo .kb-switches .rec-top .rec-dot{width:11px;height:11px;flex:0 0 11px;border-radius:50%;background:#b3261e;box-shadow:0 0 0 3px rgba(179,38,30,.22)}
body.solo .kb-switches .rec-top:hover{border-color:#8b2a23;color:#fff}
body.solo .kb-switches .rec-top[aria-pressed="true"]{background:#3a1412;border-color:#b3261e;color:#ffd6d2;animation:recRingD 1.4s ease-out infinite}
body.solo .kb-switches .rec-top[aria-pressed="true"] .rec-dot{width:9px;height:9px;flex:0 0 9px;border-radius:2px;box-shadow:none;animation:recPulse 1s ease-in-out infinite}
body.solo .kb-switches .rec-top em{font-size:12.5px;color:#ffb0a8}
body.solo .kb-switches .rec-top[aria-pressed="true"] #recLabel{display:none}
@keyframes recRingD{0%{box-shadow:0 0 0 0 rgba(179,38,30,.5)}100%{box-shadow:0 0 0 8px rgba(179,38,30,0)}}
body.solo .kb-switches .rec-take{order:13;height:34px;padding:2px}
body.solo .kb-switches .rec-take .rt-b{height:28px}
/* the finished take pops out under Rec instead of pushing the row around */
@media (min-width:621px){body.solo .kb-switches{position:relative}body.solo .kb-switches .rec-take{position:absolute;z-index:30;top:calc(100% + 8px);left:var(--rtx,auto);height:40px;padding:4px;background:#1d1b18;border-color:#5a2622;box-shadow:0 14px 30px rgba(0,0,0,.55)}
body.solo .kb-switches .rec-take::before{content:"";position:absolute;top:-6px;left:24px;width:10px;height:10px;background:#1d1b18;border-left:1px solid #5a2622;border-top:1px solid #5a2622;transform:rotate(45deg);left:var(--rta,24px)}
body.solo .kb-switches .rec-take .rt-b{height:32px}}
/* mid widths: the top row keeps everything on one line (Keys loses its word, gaps tighten) */
@media (min-width:1025px) and (max-width:1399px){body.solo .kb-switches{column-gap:6px}body.solo .kb-size .ks-l{font-size:0;gap:0}body.solo .kb-size .ks-l svg{width:18px;height:18px}}
/* Master EQ (piano page) */
.eq-wrap{display:none}
body.solo .eq-wrap{display:block;position:relative;margin-left:auto}
html:not(.ffo-mix:where(:not(.fft-mix))) body.solo .eq-wrap+.kl-wrap{margin-left:0}
.eq-btn{gap:8px;padding:0 16px 0 14px}
.eq-btn svg{color:#bfb6a4}
.eq-btn.shaped svg,.eq-btn.open svg{color:var(--yellow)}
.eq-btn:hover,.eq-btn.open{border-color:var(--yellow)}
.eq-on{display:none;width:7px;height:7px;border-radius:50%;background:var(--yellow);box-shadow:0 0 6px var(--yellow)}
.eq-btn.shaped .eq-on{display:block}
.eq-pop{width:300px}
.eq-k{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));justify-items:center;gap:8px;padding:2px 0 4px}
.eq-k2{grid-template-columns:repeat(2,minmax(0,1fr));padding:0 16% 4px}
.eq-pop .kl-l{margin:8px 0 6px}
.eq-k .kn-wrap{display:flex;flex-direction:column;align-items:center;gap:4px}
.eq-k .k-lab{color:#bfb6a4;font-weight:900;font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.eq-f{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;padding-top:12px;border-top:1px solid #2c2a26}
.eq-f span{color:#8a8170;font-weight:700;font-size:12px}
.eq-flat{height:32px;padding:0 14px;border-radius:999px;border:1px solid #3a3630;background:#262420;color:var(--cream);font:800 13px var(--body);cursor:pointer}
.eq-flat:hover{border-color:var(--yellow)}
/* Master volume knob on the rig (switch: mastervol) */
.mv-wrap{display:none}
body.solo .mv-wrap{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 14px 0 4px;border-radius:999px;border:1px solid #3a3630;background:#262420;box-sizing:border-box;cursor:ns-resize;touch-action:pan-y;-webkit-user-select:none;user-select:none;flex:0 0 auto}
body.solo .mv-wrap:hover{border-color:#5a5246}
body.solo .mv-wrap .knob.mv-k,body.solo .mv-wrap .knob.mv-k svg{width:36px;height:36px;flex:0 0 36px}
body.solo .mv-wrap .knob.mv-k{cursor:inherit}
body.solo .mv-wrap .knob.mv-k::before{inset:7px;background:radial-gradient(circle at 38% 30%,#5b5853 0,#2b2927 38%,#121110 75%);box-shadow:0 2px 4px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.18),0 0 0 1.5px #0b0b0a}
body.solo .mv-wrap .knob.mv-k .k-trk{stroke:#3a3630;stroke-width:7}
body.solo .mv-wrap .knob.mv-k .k-val{stroke-width:7;filter:drop-shadow(0 0 2px color-mix(in srgb,var(--yellow) 70%,transparent))}
body.solo .mv-wrap .knob.mv-k .k-ptr line{stroke:var(--cream)!important;stroke-width:5}
body.solo .mv-wrap .knob.mv-k:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--yellow) 45%,transparent)}
body.solo .mv-t{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;line-height:1;gap:3px}
body.solo .mv-t b{font:800 10px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:#bfb6a4}
body.solo .mv-t em{font-style:normal;font:900 15px/1 var(--body);color:var(--yellow);font-variant-numeric:tabular-nums;min-width:30px}
body.solo .mv-wrap.mv-mute .mv-t em{color:#e0614f}
html.ffo-mastervol:where(:not(.fft-mastervol)) .mv-wrap{display:none!important}
body.solo.tools-tight .mv-t b{display:none}
@media (max-width:620px){body.solo #kbTools .mv-wrap{order:5;flex:1 1 100%;justify-content:center;margin-left:0!important;padding:0 16px 0 4px}body.solo #kbTools .mv-t{flex-direction:row;align-items:baseline;gap:8px}body.solo #kbTools .mv-t b{display:block}}
@media (max-width:620px){body.solo .eq-wrap{order:5;margin-left:0}.eq-pop{position:fixed;left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));width:auto}}
body.solo.tools-tight .kl-btn{width:44px;padding:0!important;justify-content:center;position:relative}
body.solo.tools-tight .kl-btn>span:not(.kl-dot){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
body.solo.tools-tight .eq-on{position:absolute;top:6px;right:6px}
/* phone: tools tidy in two even rows: [record][looper] then [EQ][Key light] */
@media (max-width:620px){
body.solo #kbTools .rec-btn{order:3}
body.solo #kbTools .lp{order:4;flex:1 1 calc(100% - 54px);min-width:0}
body.solo #kbTools .lp-main{flex:1 1 auto;min-width:0;justify-content:flex-start}
body.solo #kbTools .rec-take{order:4}
body.solo #kbTools .eq-wrap,body.solo #kbTools .kl-wrap{order:5;flex:1 1 0;margin-left:0!important;min-width:0}
body.solo #kbTools .eq-wrap .kl-btn,body.solo #kbTools .kl-wrap .kl-btn{width:100%;justify-content:center}
body.solo #kbTools .rig-plate{order:6;margin-left:0!important}
}
/* phone: the action chips (Learn, Song, Key map, Sustain, MIDI learn) sit in an even two-column grid */
@media (max-width:620px){
body.solo .kb-switches :is(#lnTg,#sgTg,#kmTg,#susInd,.ml-ctl,.rec-top){flex:1 1 calc(50% - 6px)!important;margin-left:0!important;justify-content:center;box-sizing:border-box;min-width:0}
body.solo .kb-switches .ml-ctl>button{width:100%;justify-content:center}
body.solo .kb-switches #staffTg{margin-left:auto!important}
}
/* home page keyboard: no switch row (Note Houses always on, 36 keys) */
body:not(.solo) .kb-switches{display:none!important}
.sg-ai{display:block;margin-top:4px;color:#8a8170;font-size:12.5px}
.sg-ai-b{font-style:normal;font:900 10.5px/1 var(--body);letter-spacing:.06em;text-transform:uppercase;color:#bfb6a4;border:1px solid #4a453d;border-radius:999px;padding:4px 8px;align-self:center}
/* Learn: chords / progressions */
.ln-mode button{min-width:0;padding:0 14px}
.ln-hint{color:#bfb6a4;font-weight:700;font-size:13px;flex:1 1 200px}
.ln-panel .ln-pgrow{display:none}
.ln-panel.pg .ln-pgrow{display:flex}
.ln-panel.pg .ln-chrow{display:none}
.ln-progs{display:flex;flex-wrap:wrap;gap:6px;flex:1 1 100%}
.ln-progs button{display:inline-flex;align-items:center;gap:7px;height:34px;box-sizing:border-box;padding:0 13px;border-radius:999px;border:1px solid #3a3630;background:#262420;color:#d9cfbd;font:800 13px var(--body);cursor:pointer;white-space:nowrap}
.ln-progs button span{color:#8a8170;font-weight:800;font-size:11.5px}
.ln-progs button:hover{border-color:#5a544a}
.ln-progs button[aria-checked="true"]{background:var(--yellow);border-color:var(--yellow);color:var(--black)}
.ln-progs button[aria-checked="true"] span{color:#5a4300}
.ln-steps{display:flex;flex-wrap:wrap;gap:8px;flex:1 1 100%}
.ln-steps button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:64px;height:52px;padding:0 12px;border-radius:12px;border:1px solid #3a3630;background:#1d1b18;color:var(--cream);cursor:pointer}
.ln-steps button b{font-family:var(--display);font-weight:600;font-size:18px;line-height:1}
.ln-steps button span{font:900 11px/1 var(--body);color:#8a8170}
.ln-steps button.on{border-color:var(--yellow);background:#2e2615;box-shadow:inset 0 0 0 1px var(--yellow)}
.ln-steps button.on span{color:var(--yellow)}
@media (max-width:620px){.ln-mode{flex:1 1 100%}.ln-mode button{flex:1 1 0}.ln-hint{flex-basis:100%;font-size:12.5px}.ln-progs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.ln-progs button{height:auto;min-height:40px;padding:5px 12px;flex-direction:column;align-items:flex-start;justify-content:center;gap:1px;border-radius:12px}.ln-progs button b,.ln-progs button span{max-width:100%;overflow:hidden;text-overflow:ellipsis}.ln-steps{gap:6px}.ln-steps button{min-width:0;flex:1 1 calc(25% - 6px);height:48px;padding:0 4px}.ln-steps button b{font-size:16px}}
@media (min-width:1000px){body.solo .rig-panel .mix-strip:has(#ledPad) .ms-h{column-gap:12px}}
/* piano page: header rows and selector rows line up across Piano, Pad and Synth */
@media (min-width:621px){
body.solo .rig-panel .mix-synth .syn-sel{box-sizing:border-box;align-items:center}
body.solo .rig-panel .mix-synth .syn-sel[aria-label="Synth octave"]{height:28px;padding:1px}
body.solo .rig-panel .mix-synth .syn-sel[aria-label="Synth octave"] button{height:24px}
body.solo .rig-panel .mix-synth .syn-sel[aria-label="Synth wave"]{height:30px;padding:2px}
body.solo .rig-panel .mix-synth .syn-sel[aria-label="Synth wave"] button{height:24px}
}
body.solo.np-tight .rig-panel .mix-synth .ms-k{gap:6px!important}
/* Root inside the Pad section (piano page) */
@media (min-width:621px){
body.solo .rig-panel .mix-strip:has(#ledPad) .ms-h{display:grid!important;grid-template-columns:max-content max-content 1fr;justify-items:start;align-items:center;row-gap:10px;column-gap:12px}
body.solo .rig-panel .mix-strip:has(#ledPad) .ms-h .pad-styles{grid-column:1/-1;grid-row:2}
body.solo .rig-panel .rs-pad{grid-column:3;grid-row:1;justify-self:end}
body.solo .rig-panel .mix-strip:has(#ledPad):has(.led-btn[aria-pressed="false"]) .ms-h{grid-template-columns:max-content max-content!important;justify-content:center}
body.solo .rig-panel .mix-strip:has(#ledPad):has(.led-btn[aria-pressed="false"]) .rs-pad{grid-column:1/-1;grid-row:2;justify-self:center}
}
body.solo .rs-pad{height:28px;padding:0 2px 0 10px;background:#141312;border-color:#3a3630;flex:none}
body.solo .rs-pad .rs-l{font-size:10.5px;letter-spacing:.14em;margin-right:2px}
body.solo .rs-pad .rs-b{width:24px;height:24px;flex:0 0 24px}
body.solo .rs-pad #rootName{height:22px;min-width:30px;font-size:14px;padding:0 6px}
body.solo .rs-pad .root-pick{top:calc(100% + 12px);bottom:auto;text-align:left;text-transform:none;letter-spacing:0}
body.solo .rs-pad .root-pick::after{top:-9px;bottom:auto;border-right:0;border-bottom:0;border-left:2px solid var(--black);border-top:2px solid var(--black)}
@media (max-width:620px){
body.solo .rig-panel .mix-strip:has(#ledPad) .rs-pad{grid-column:1/-1;grid-row:3;width:100%;justify-self:stretch;display:flex!important;height:34px}
body.solo .rig-panel .mix-strip:has(#ledPad):has(.led-btn[aria-pressed="false"]) .rs-pad{grid-row:2}
body.solo .rs-pad .root-pick{left:50%;transform:translateX(-50%);width:min(300px,calc(100vw - 32px))}
}
body.solo .rig-panel .rs-pad .rp-head b{font-family:var(--display)!important;font-weight:600!important;font-size:18px!important;letter-spacing:0!important;text-transform:none!important;color:var(--black)!important;display:block!important;order:0!important;flex:none!important}
body.solo .rig-panel .mix-strip.has-lvl,body.solo .rig-panel .mix-strip.has-lvl:has(.led-btn[aria-pressed]){position:relative;padding-bottom:24px!important}
body.solo .rig-panel .lvl{position:absolute;left:14px;right:14px;bottom:10px;height:5px;display:flex;gap:2px;pointer-events:none}
body.solo .rig-panel .lvl i{flex:1 1 0;border-radius:1.5px;background:#3a2e12;box-shadow:inset 0 0 0 1px rgba(0,0,0,.35);transition:background .05s}
body.solo .rig-panel .lvl i.o{background:#3d2710}body.solo .rig-panel .lvl i.r{background:#3d1712}
body.solo .rig-panel .lvl i:is(.on,.pk){background:#F6A801;box-shadow:0 0 6px rgba(246,168,1,.55)}
body.solo .rig-panel .lvl i.o:is(.on,.pk){background:#ff8a1f;box-shadow:0 0 6px rgba(255,138,31,.6)}
/* a theme recolours the amber parts (see the theme tint module) */
body.solo.tint-on :is(.ch1-plate,.ch1-twin,.jy,#lcd,.lcd-tmg,#mtkBpm,#mtkLeds,#shSel .sh-v,#rootName,.pszb-logo,.pszb-lcd,.nmb,.nmf,.mix-strip .led-btn[aria-pressed="true"],.solo-title .ch1t,.solo-title .cha b){filter:hue-rotate(var(--th-hue,0deg))}
/* a part inside another tinted part is turned once, not twice */
body.solo.tint-on :is(.ch1-plate,.ch1-twin,.jy,#lcd,.lcd-tmg,#mtkBpm,#mtkLeds,#shSel .sh-v,#rootName,.pszb-logo,.pszb-lcd,.nmb,.nmf,.mix-strip .led-btn[aria-pressed="true"],.solo-title .ch1t) :is(.ch1-plate,.ch1-twin,.jy,#lcd,.lcd-tmg,#mtkBpm,#mtkLeds,#shSel .sh-v,#rootName,.pszb-logo,.pszb-lcd,.nmb,.nmf,.mix-strip .led-btn[aria-pressed="true"],.solo-title .ch1t){filter:none}
/* your profile circle wears the theme colour */
body.solo.tint-on .kb-switches .me-btn.me-pro{background:var(--yellow);border-color:var(--yellow)}
body.solo.tint-on .rig-panel .lvl i{background:color-mix(in srgb,var(--yellow) 16%,#141414)}
body.solo.tint-on .rig-panel .lvl i:not(.o,.r):is(.on,.pk){background:var(--yellow);box-shadow:0 0 6px color-mix(in srgb,var(--yellow) 55%,transparent)}
body.solo.tint-on .rig-panel .lvl i.o:not(.on,.pk){background:#3d2710}body.solo.tint-on .rig-panel .lvl i.r:not(.on,.pk){background:#3d1712}
body.solo .rig-panel .lvl i.r:is(.on,.pk){background:#ff3b2f;box-shadow:0 0 7px rgba(255,59,47,.7)}
@media (max-width:620px){body.solo .rig-panel .mix-strip.has-lvl,body.solo .rig-panel .mix-strip.has-lvl:has(.led-btn[aria-pressed]){padding-bottom:12px!important}body.solo .rig-panel .lvl{position:static;grid-column:1/-1;width:100%;justify-self:stretch;order:99}}
/* ---------- ch1 wordmark ---------- */
.ch1{display:inline-block;height:1em;width:auto;aspect-ratio:2875/712;fill:currentColor;vertical-align:-.12em;overflow:visible}
.kb-pop .ch1{height:1.05em;color:var(--yellow);margin-left:2px}
body.solo .ch1-plate{flex-direction:column;align-items:flex-end;justify-content:center;gap:3px;color:var(--yellow)}
body.solo .ch1-plate .ch1{height:30px;vertical-align:0;filter:drop-shadow(0 0 6px rgba(246,168,1,.45)) drop-shadow(0 1px 0 rgba(0,0,0,.8))}
body.solo .ch1-plate small{font:900 8.5px/1 var(--body);letter-spacing:.32em;text-transform:uppercase;color:#8a8170;margin-right:-.32em}
@media (max-width:620px){body.solo .ch1-plate{align-items:center}body.solo .ch1-plate .ch1{height:26px}}
.solo-title .ch1{height:26px;color:var(--yellow);vertical-align:0}
.pg-ch1{color:var(--black);margin:2px 0 10px!important}
.pg-ch1 .ch1{height:30px;vertical-align:0}
/* ---------- ch1 showcase (home page) ---------- */
.ch1-sec{background:radial-gradient(120% 80% at 50% 0%,#24211c 0%,#111 60%);color:var(--cream);padding:90px 0 96px}
.ch1-head{text-align:center;max-width:680px;margin:0 auto}
.ch1-k{display:inline-block;margin:0 0 18px;font:900 12px/1 var(--body);letter-spacing:.24em;text-transform:uppercase;color:var(--yellow);border:1px solid rgba(246,168,1,.45);border-radius:999px;padding:7px 14px}
.ch1-title{margin:0;line-height:0;color:var(--yellow)}
.ch1-title .ch1{height:92px;vertical-align:0}
.ch1-lede{margin:20px auto 0;font-size:19px;line-height:1.5;color:#d8d0c0}
.ch1-shot{display:block;margin:46px auto 0;max-width:1100px;border-radius:22px;overflow:hidden;box-shadow:0 0 0 1px #34302a,0 30px 80px rgba(0,0,0,.6),0 0 90px rgba(246,168,1,.12);transition:transform .25s}
.ch1-shot:hover{transform:translateY(-3px)}
.ch1-shot img{display:block;width:100%;height:auto}
.ch1-feats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:1100px;margin:40px auto 0}
.ch1-f{background:linear-gradient(180deg,#22201b,#1a1814);border:1px solid #34302a;border-radius:16px;padding:20px 22px;box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.ch1-f h3{display:flex;align-items:center;gap:10px;margin:0 0 6px;font:900 13px/1.2 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--yellow)}
.ch1-f h3 i{flex:none;width:9px;height:9px;border-radius:50%;background:var(--yellow);box-shadow:0 0 8px rgba(246,168,1,.8)}
.ch1-f p{margin:0;font-size:15.5px;line-height:1.5;color:#cfc7b6}
.ch1-cta{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:40px}
.ch1-cta .btn{display:inline-flex;align-items:center;gap:8px}
.ch1-cta .btn .ch1{height:1.15em;color:var(--black);vertical-align:0}
.ch1-cta p{margin:0;font-size:15px;color:#a99f8d}
.ch1-cta p b{color:var(--cream)}
@media (max-width:900px){.ch1-feats{grid-template-columns:repeat(2,1fr)}.ch1-title .ch1{height:72px}}
@media (max-width:560px){.ch1-sec{padding:64px 0 70px}.ch1-feats{grid-template-columns:1fr;gap:12px}.ch1-title .ch1{height:58px}.ch1-lede{font-size:17px}.ch1-shot{margin-top:32px;border-radius:14px}}
.pc-c .ch1{color:#111}
body.solo #kbTools.plate-alone .rig-plate{margin-left:auto!important}
.ch1-lock{aspect-ratio:1490/874}
.ch1-lock .ch1-sub,#ch1lock .ch1-sub{fill:#a89f8c}
body.solo .ch1-plate .ch1-lock{height:40px}
.ch1-title .ch1-lock{height:150px;filter:drop-shadow(0 0 10px rgba(246,168,1,.35)) drop-shadow(0 0 28px rgba(246,168,1,.18))}
@media (max-width:900px){.ch1-title .ch1-lock{height:120px}}
@media (max-width:560px){.ch1-title .ch1-lock{height:96px}body.solo .ch1-plate .ch1-lock{height:34px}}
.pg-h-ch1{display:flex;align-items:center;justify-content:center;gap:.28em;flex-wrap:wrap}
.pg-h-ch1 .ch1{height:.95em;color:var(--black);vertical-align:0;margin-top:.04em}
.pg-card .pg-logo{margin-bottom:14px}
/* ch1 as live text (hinted, crisp at small sizes). Exo 2 Italic subset to "ch one", SIL OFL */
@font-face{font-family:'Exo2CH';src:url(data:font/woff2;base64,d09GMgABAAAAAAVwABAAAAAACowAAAUWAAICjwAAAAAAAAAAAAAAAAAAAAAAAAAAGhYbgwocMAZgP1NUQVRIAHQRCAqHOIYGATYCJAMwCxoABCAFg2AHIAwHG6oIaD4M2GTIQuv7EIlEpUiwOIJcPLxve9oSbtj+HZkRRDat6tGaVodIIRCFjyw/hkggyc8QHcX6P//e7mMATWjMN7qkNDtWqcga7qDdPX3KfXoQcF7zMIG2WlAhXH/68TkAeZxiZIPNIBNHqP/9Cw3nPyxA19bj6/v7sVkxTYSiniKe6gP/fLSZhiQ607gjEReXFxKS5miaZQ9poYma4SafYFIPFlQmrnu3vrpAK0ASQi4EcuNkoBctKakB5116hQic9ymwEJwPd6ok4IyGy+Mah/YoJGCIJJDU68JIo3jWJ0xBFoBY2QmNHtxVbFRczDgZh/LNvCPDZ/6Ta3Kzf23GNVlVSyitLIQXa1BAvdAoU6dO0qQKkkzB3Qo1IBMaz0I0ShiKbIvdT4Hmvs/t/Cz+R+pIpbQeWCmOE1tFxSCQBAT8U/NJcKYfaeFvbSrILo9wAQHxd3oK/VDiDFN0wqhByDP28VQE8KvRvQljCJlOKKSgiTHSKygIKUxGTpGKsdo4BI+2/T6WKJl+suUqUK4bxiOtgahlBMn/rP3vNa962XPudpc73Fy4PW2IGm1BK9ANaA9iEIgbABkgJAUhCSFZfP160NkDenWyRP4WTRasZTvh4LvvDu61997LS+WyCyuVYnPL1Nkq56VqNS5qadnW3FyZ3KYDD0gXPlhsrTmtkwfA3S3rW0OrbZkxg5kGV+S1WW+OAfd12bjwVI/8xlsZY/QVi4P3dt4w/2T34k13RUHYXLmlXFjuxD3AgZY1A8db4iI3sG9GPbRTNQ89//5Qhn8frlIp560Is8HH47bP8tIH8+7llXLFPyblVN9jeam8asBNy9o1vXd060zmjBJbvcYlUK6J+ZpDTPqE8Cnp87E+W/nqqN+XPde44KuBd9jC0mik5/OfIMbIzqijpxvnP7wxz9mlyYlZvPRSAB4Gnp5yTxd5X1jU2eN64B/4eV+kFn61M3pEzc7LYK8alsyN9ZLly2DzyafWP3VHj1WVJcs9nPEcePK6gQPqLNy2/PvnklZb2rk5MOuLmAOrx/z44Z4fbJ937PErXlu53zutyrV/zx4GhgwqLqCmE+f2KyrLKYtGOgEf6QnlECDKFzBgPHA70aX6z7wvLUvOM7I93Mrz890qxNtJsji+6ytXrTUJXo0jQ6RtbaFSHAF2J44qL4eMqQWprlms5ywX83XzY6+7eW6Ze2W2W4J/C5tz5f4FJnl1rqtxVJistSNM0hUG6hP/yNrayO8h0hj4MmsfG7/4gTf6W+7IOWuOdMIa4m+/4KdZ59i4jWJ9y1a33189T6wuMljW2voEjtZUA4VkiCEtVfmxZ90zPx/ls8l6Gz77LRBIabR2+pe3tU053Yj6B5/eQQfA74PfyZYmr4X7UC+B4IKA+qAz0+Uft7FaJZnOlCQ1jVOZlqxL556GS2bHv6ak7rzFyuoTxHvjK6S4FmsVegN1FgSKSnJFZgTchSMJubskSRuPSArGOJBkevhHqONGEtfrFr00CNAqYvbRPcUIY4Wa8QAmkEeJbFIyegp8XDwqSJQIkaIhNXgwJJeOlAPMV0EBCQh31++TSU2FRwqKSkgAHjijZZSShAvHxa8zSq1LmG5S4mIQ4ChyiWCcegkVpfDRiKFHw0QIHH1QFYxLTaQT7hoo8ilIVqY8kyu5vqkoob5+ukFOqg6eO+bPYh/qeXu95erh/UKFz85OInzdqtb2fjpJUECNJrhVvhC1nV0D) format('woff2');font-weight:400;font-style:normal;font-display:block}
@font-face{font-family:'Exo2CH';src:url(data:font/woff2;base64,d09GMgABAAAAAAXgABAAAAAACvQAAAWGAAICjwAAAAAAAAAAAAAAAAAAAAAAAAAAGhYbgwocKgZgP1NUQVRAAHQRCAqIFIZXATYCJAMwCxoABCAFg3YHIAwHGwMJAC4KbLcVnTAJUGErUowWzzzh8uG/0/7cyQSDcJU6ycJxIU+bSqmxAPTSB+qz4fn/Lnb/m8U9myeSSFhCQVAeWDCE4ZoEuj7Hp/8B1mE3J/4+v6zP/79aU7tBForQOBQmKirGbcL3F1TAEgtEwtVWVtgqIgUoO/VVaExVhTE1ujbMCe1MiBwRf03eHATAAwCAQhAsggBYZlHoa0KaAM/HQGczPJ+dziZ4viu7W+GJBmD+GPNydrZCFs/RAEViJIYMYfQzAgGoCmV4DDVPvjiB3Z7gUEAJ9sMfgAa8ws9gMcTfc68o2B355bY0VbY07PeTotAkABkRMTGCwcMnIuJoOCrltKw19ONMQFFFCwi0i8TldLnJv8RAdarArVT7XmCpMlhrLNiXCP+f5isxFzpt7YcZCNBfEqgHOJEc2QHoiJD2IzgDdSTGoD519d0EwMeM5hAaBE0VtraRf0tOgWoBgKKiOCoixK6hVRCV72NpOrHiJclUzale2zwILwNaf6e75abrLtlvnz22RwhkPZnuTmz+kdAC1EAuAPkDAIAOUaGIbGwSlhZgONP0C47RqPyMKkYtUamalg8+HCscevSI7a43LsE1OBi//IPAvAsutr//vuMDgVp43Ndf4Jcd8S7YcZSTC3D42HIU7/+gwGMQX17CljufeUedvdVXsuUIu+93bGTRtn2e7Jwd2gK65vbjHLf86IjCrWc9uO37vYqblg8OCi6RSKOSt8yVNnDJDzwRSNZp9fx1l95nn/B0++PH4/MUUnngoG7HHVec4HAcvnzca/exR/ZlD264dPoF/YEEmPeeg4QCtnj3KV+lS8i3yBd2uLQjkuVg9elZ7yNcAENeEC5QHM7iogMe0k9ywjznb/Ns9s2p0aKkI4rke9a14y1xWk9dI5sld/KdUaYvYwvEB+jUT0uYWGd7sn63eqaiyrg4Kbt5DKS7raGaerfeVPrfY/xXRK3UcyTtXDmphPEel8ZEhZ7oT4506PuY1H78cbbirNOY3Ktlc2K5nHtaZ7KavwEOnS1ZoVEPy1STssNvq77KU42KGB/3R1XRCqtek6EmGfsf9IgHNKwlOPpbzLtV2RU3ZqdmIV9jXpKc3WRIreyKHbdTvUhRNXVRSm7LmIT8mByzqU9RL6+Vd8WYo2OyLeZ3s07ZoND9B6fCNsYWMsZfNClkVHCi9/g0WRKTqEo6FqBSd62XRLUUcZPyqm1+nXyJvCSktdGEkJGVZ/BJmN96Oc3zwB8jZDFfjvi7pS0lOlJaMS7NNjJ6AZc+POu6xevv//a1bkvik2lfR0WQXy9bxCSNK/u/ZAQ2/BMRGSuLsTVXmnPTsvXGsuBoG4mKjeiJ6H/seTtJnbN4hqmosuo6Nv4zsWV7CV0nJz3bcKcsKNrqFxPeG3mMk8wqVXtG3A+wD6HSqu+Ql/PFIa2NZiG3ymro5Es3YVvTe023D43JYJOYGC413Gp3j8lk4pg4LiUCAAACoLI6tsNcWq4M+0/WRD8C8HIPrwGAb8au+2foqlsiet1+oEhQAIDAZENEGqKh1zsOKyGuw6cRoQmGKRYYswuTcu961U6Y6id+8YUhCdDR2GD4+RxYyqxzSKShl4i0aCJlZrnmLAyAfcDZSGjtM1J414wiQR4ZaeMMGcU8a4xBwlARTgTgqwJomWugeOVqRqw27QZ0alCnXjcdKzMLGx1BPSedeP3aUGRVlk7SiNHqEFdH69GtXptOXXQmxHRVt3ZdQpiY1GnQOqpHFaNqbVoQtOPZuk4zp9qxrbp1MaXHmrrbyGxi+iRd/z41GvRokaxbpWYNqolYTG2oDJm1eKGh8eTS1NXFv1V3ruRzlo825HSTLsW1plJ3cNbuUk6JFuqAbrIOv0LcC0evBA==) format('woff2');font-weight:500;font-style:italic;font-display:block}
@font-face{font-family:'Exo2CH';src:url(data:font/woff2;base64,d09GMgABAAAAAAXMABAAAAAACwwAAAVxAAICjwAAAAAAAAAAAAAAAAAAAAAAAAAAGhYbgwocKgZgP1NUQVRAAHQRCAqIEIZFATYCJAMwCxoABCAFhBQHIAwHGw8JIJ4D7uaSFI2wiAp+aD64+Hjo24/fndn9Jk4i/kTikMSk04haIqGJRY/QCImQtPJ+Hk//T9NMxcg7MgORDkrllE9g2z0RxReAMl0JN9Zfu9H/AOuwr9bUBliRMMjCEhkdYS8fvNmgA5SJQyyQkZUVto7IoSZwVfXVVRVWdaldW9LRr3AlgW5ACqFzxrgvcUA1/FBjOwnh16Ya1BB+yyBRQfh9gUkL4XCoPrruSQxa8LSGwPFWo7y0iwlJyTgIK6RhC0qTopWBs7gLARdC6Zd/ARzf4Stg6UD83fx9f1rZcjO/+db8lcigJXBv1iZVrWhXtGgROpSJqVS0GoM2TLQnhmRVCgy8E4AZukDOrxlSEDfyGTb4/6/auLuB3BiHvEgDzoH4neZngbkQej//vwjUR4wiICB+5SkA85gi+bCZjB20DHsgk5sYwFNGUwwcQtVvtDRQUMCBoggSihUFpuAKcJexr+Rdq3l1GjTrIiIhR9//gQK9k6T9m+6aqy47Z4KNxfYYCAJRNP/nI6D7knFgAMQeiK8Agkp3SEUkAuQutDiJ4/eYMOgbk+Xr5dfq269a7ribSJ6752QtO3PETtodF9nLXUW8O3bWMqdzwEUCmrKOAnLZ50Do4JaDbDZ5xr6wBkYGB7kkRzXKogRzZkDErU0e3XKBhYOHwoe32cJZWy1mEKS3Xz73XX4wbGjrySj2tomIEQszpJ1Encjzlj1xmnQ1/dwll3Vek2mqlpD3lk0nXzgRabFeZC+/fz+Zd8FIYKs60I4X92X8gYH9+w9HbN+2L2HZmQMW7UgLgtQZ+4NnAznIGtm+SZL7oLxfqZ+02EMTY5Ra/uHJyJGzLaH+2kXygmQSMh9GBjQoXTiBLNaD3+zy6fgJ26EFV4kWt7e+CFoSe6IaMuevfRnU41HDasN66fQWCv/YfWmXjNtKz25I3e2/0Fuavbijw4yA+bpsMtDPEbjgj4j5JemliYVhv2GLPtViBsg/1i7w6iAmedX2d1B+R31mnYTsF/yTV+hx5X/+S97yW3L8P4lrw/OTA8YqLjocvevy3MR9v4+yuGn7OeQx+S8RtfvSrNADTXp2TC07wIMFX7OwJnun/0qunFjS3WGO6dbPr0nb5b/CW5q3pKvTiNpXZdRFU9xhDokPrU3PJGL43KHjf2GF7P8FRt9ToVpERiee0Y3y1/YkBFTfesUxfqzxIU7rCzLMHIozXEbrCKhNqExN6Fw2ivFCa3AssGv4SaDgi4RAtHbfmrAI5UfyxYvnJoY0YO34LQ7N7fDvck+6ZyxPnOTJ8+zIEDcXSoPhXK31LV51hO5sRkXysYCoK7fDe2oap9dQV4Jswsixyy05gnOCy3C11Pe/0xK6c+mFpXZB2NW14d3UgmYLF5v/Tw51rv4HqIlvKkgzcwWcsWrt5GyKMhMZJiSNX3tK7uisWJ5mmajwZ4QaR5eIC+0AqNtfMVdLFP4XKZ/yf55M5hcAfLNw/AE/E9f9/N/mfsaLyxXAtHYJNQs+r4G8aNsXsBLZqzvLxGcfRGb9KroAAWnHZ4QHcaA3a8E/hcCC7hHg+gHQbqke5e4IfAmBIpXv9FAwVb2A52CWhVk2Wer2QVbseyKrtoMlazEZhdJW69GtwwDdMWUTbtUnMPz4xwKoQ9OZykBBRs4EyZMjFwEhyUkgDaagFetINwNi5QEiA4M1zEzkaDBhhKSQn2uiY1QqWzYZBU0HmQllEaFpjpvRaDJqElI0LROjbOfImTuz5Eh1nhDe3MRAoBZNTayFiYCagsgQzmVEZTp1oSNRZgWabMhci1Nb0VzoJwkwKLy+CTm+Pg6WB0gifSX4MSbNH6DZUR7S+n7+Xzh8JQA=) format('woff2');font-weight:800;font-style:italic;font-display:block}
@font-face{font-family:'Exo2CH';src:url(data:font/woff2;base64,d09GMgABAAAAAAXcABAAAAAACxAAAAWBAAICjwAAAAAAAAAAAAAAAAAAAAAAAAAAGhYbgwocKgZgP1NUQVRAAHQRCAqIHIZUATYCJAMwCxoABCAFhAoHIAwHGxQJQB4F7p6GCctoW8RQhle+4InXo95MsrIOYPYAd5AqWiVYyX9obWKe4dJBnHjCtb2IoZ4moa60hboQV8J+2F++u/FrohihtFWF4qO1VvfvvVlIpqVpqV/avOi+J1FFLTQqkVBJIh7JlulkEqEUSmTRTVQClWjRa/LpCOANACiC4IkggCf51MJXz8zGBUDvzKQYAP2TQqMBDAlMiQOADfD06BscmhQHISl7g+JKKB64IznEiKAUjSrB/PFIYrEYrVUvFHxYMD/8IjZwmw944gH8PfPX/AIMzR/zjaXq8mjKPPge5oZi4wq4Y+GCC4IHlqfYWBYu7JZ73M+FIJV0FCeOPz05C7az1VU7gB90jo/3/42muhV4lm7wIqnk+oLp3zRfDFfiGW79mzKwZ0gZVAfKR90PxGMhZ89Je5YCyejI8IgUkgs+ZDSF5EOw8eeM+2mHdGNwPADFloSohfi4Nj2c/nFPtYmnLg3ajBCR0RgbA/HUIXJ+p/loTptT5oQ5bDaY9WatWYEAkAvEGPwI7ycSDgSA5IE8BABs+qhiuYSYtzSJkZTwismBDPxyDEiAq79/dPXdpRRn7Oyy55yrZx86Dx/dqj/3oaxy5dZzzuPH7Z+AkWb7RyUO/rWVA+uYxHwcpKkute88/NAh2IKbPigbOgfQcF8p3adjAi1Ht3MRXUNckaVrWSA/tXsa85q7jRPvXOSMrtjATcoLOA/BriFaOedWM/JyPIkKPb7dnyZV4qzdN66rCHRt/ZUraRY5+1fHxa88+7Ce4+4+vj7N/b19LcsenFkQoAYKyH0j4s1zi9MBJfun4lgPm7WTauf03IaHOFhU9HJfdE2IpG+eOE6HSJOBsyqo0AVr7d0x4sZXOT5pV75GubkI6PzaZp/k3d3hGAHp4wyidxWYdKL6tbt89vBsRKRYCPcHnAlRvrxJqzhhcD1QYoGqf75dEHijZWGqbjQ/lXS56a0yPLU0c6JtaPbMta3ryVvm1bECZF+PfXm70WR/vJco0WuHIeDIzV8I+/d5T2eT2OxYRZN6+pO/tBKhxAq9o1GdSsUWbDbR0h1NZawH+ti1dbaZejpklLF4b+C7d1/Fiqat4gRtwtKNYoIBHyYxmrW+jkWojqWsVAKdhPOotaOVt5CTWVgiIf6LVxR+z+iJsYxWgbakVNFXYl3aMk2ZqJkrMjI2r6dtUR/gfV8ZriKchNM4pR0XrQDVvldSIvwWpXmXWkSefAv2bPwUfL9ZU00b7rakzM+nZlO0xWARIcdpSK5S/rg1m7by6VKlu4RpCqahONKRCDBU82eF1d9rV0yRqnJsprytmTSvpIvCvkd9Y4N0/cSTiCNNQ1wrpuWpzMBtWPs9Y9VOX0LpLHkrc72XtJfPedT721bGMGvS+DzvTJM3yr+3V5VFkggWp3TjYhXcRySGmOvqxMcruHnLV8d3kHoebeM5J7cmvktb3mBcdf0U+RjVhXvaCx66++W/uVvWO4Bba70DAV6mLPnyf68R6621B8UVBUDgOeMIxDP/H9/wjvnATby1C7xpbbjRUjJ0E0l6pT9rI5nyhUhNJ0ZbAMj660KKF/AWk21DgGb45oDHeoa6Jvin2B7AemhFQjTrRYo3p0UW1bgusskUV5ELkZIvdCVVmqgIeMuIVbakNxA//GUc1BgzYcsMHRWNBZBC8imgiHgcNGQg9dkwxkHBbsXMaWCwSH92bZYs0BgzYw4kXc5ZCybMyZJHHv3RafZaIvBAb8bY8Q8bM0bFQkZhjMOCOY/aSPebc8knQ3u4LTI3W6d6kYVEhwU8Fjoih7Ngz6tKC0bxBjl+KNXOWbyWtbCNIsgpxbrNq6De5dCVQJGP9fz5t3nB/ASzkkKg86iY6Xsp5wMA) format('woff2');font-weight:600;font-style:italic;font-display:block}
@font-face{font-family:'Exo2URL';src:url(data:font/woff2;base64,d09GMgABAAAAAAkAABAAAAAAEVwAAAilAAICjwAAAAAAAAAAAAAAAAAAAAAAAAAAGhYbhzocMAZgP1NUQVREAIEMEQgKkAiMTwE2AiQDXAswAAQgBYNcByAMBxtfDlGUb9I+yL444MnwRgkEERJGwlrbakPTEjUwOPf3OZw7os2qumdgyQxELkSMqELMIHYEsYUh5hAllyXrAqviWXPu/N9PfE2G57Hd+3eULlWbKY1iJtAJSVCjlpSmio0b4L8edgvM9/r8v7VWZ8GTmEQI7RqvcyURyl9BPnOY7KJJTSqVBmkO8whNPEQNmS6hFSJm5tKoAh1vyeOqikLOEc6/v34yQAD4AAAAMAQRQhAAShopchhVRghcxgz0QOA20N4NgUezvQ8CkQCAZSEAaF8H+oAHAEMAMC5fbngQHgQDqIA9gAY33CBKEowwEnSyD18AESTCDMNfDi4nkQC/+AUhL6Pgs88B+9Em2HexgF2aDzerDruKuuxu47Fv04QPQFmayhKjoLJHqMu+NyV2m9qEfbUwsC/EvMu97hboLy9DeLkMjuzinv9gdlfbWwvY7wFglzUE+xPsGzPgaq6tLfkbsJ8Szcft21aYuSGjBPb3pWt7RqX7AjykgCcCwGcQmht3XB4ASMMMg/FReDi8eakRE5Iv1OMDPPIFM0SAtEU0Rd5LEZcn97PWI0kKQldIReeroajV6GQyLHqBA/BTqgAosR40kyQabGBE+PfVp8JFncH6fzYbkHey5RMAffgwgDAE5GwvABDCd37wuVntSPxTWhNEAULybFLQoheAZuPQ5ShmFAAhL+LuSKMBBPJEoIRJUU5OTcuknVUvm8E/YPVLrQxaycBv2Pux853tZCc61s62t7lNbYCMAiDoZ3mgfpZLIVFV8QWIyRYNUxZhGAGB9JHAhBJYAnldGBlIjp41QugZT4pJ0jdMRMd6uHlxvTw9uVSqB8eD69ntJNq4/YumHE+ewOSnT2mnK9t09AnlePYMTXG5pPCnFjjghUypMB+TUlxoyj2vZWQwQy4jSXEanRW0ZRr5jp2AJ++iBQ2FWDeC2OKqEgC/UcxrBz6ygDHKGVJPNVBVaylXW1RD1VGNG2g6r129al0AvWZDUG3StpTUf4LLNKywfkEWg9Y7GbDt1L4AE8WsP12RdZ0y00O3j6Aph28l0DCVOeEa2Mnd156WG48/oxxXd66FyecyTc9C2zGMmd/OSTuHDqAp+0/HMIXk+67uGpUF4I5G4ckDyEYEjQvHEZZthWFdhT2uOjEUG+5ILc39TecGd8rudn74WTEwW0mK8SX8Vm9GyFIpBp5yTfhI4DyA1t+rLG76zPCtT2ItixMwRUzZT8c/UUXcdzGmyRv9fTDFGeF8+iM5n3X0Tg4TY5tM90ZEq6pJY9lOYV1pTCXIzYjb2zHhVm2dcKOU8kQeUTWWro0R0duKHIdAThlde6i5uOPjtl17JHt8nc5ijt87rFxxNe5tN9q09ejRWogwAR+Zay2eC3Ha8A0MeZwAr28ts3MZwOSlVHaZ5QhNWUGrziU/rxpyUzySbIqXVopF9o4OkR25UlkVuYxhna2jyttGl2WumT59Co4J6tMqa2SxLnh2W5sFwNd2KvlYsjVeu6gDFzc0tlheUiItakb/SFC1jiXVvMNth+HpYYm1DT8iVN6ic+ELw8+LvAnlozZkAcnkJcPO8+Sy7LDR6tFw4pDyUuv9hpcOX+t3uP0w/HQolhc0u8W/Sbjo9/4IQ+TkxTUJfZtaAmf7x/SELRy9YuQ6q5d1n3X0sv4I0J5XdUUW64PndLQHOwBfqEr9S/UhjvaOkDlSlpKRKcUiu9UiGnQMmUwhDh20WEPteL1QcdrQFpHMaLIDKjv/yyH8vuyTftmV/+zYhojiarjkjbX/AfsMsXi6XWwcg3wEyuGlhA7MvMOthyHgnl3DlNyKTV1IEun91/8jM8feckRpvfMbdAWBlbOqPYoibBy5gCvfpMBZQZL14xOj3cquz49RCAvrNWK+3cQH0xr/x6RMEAOaQzvb08b2ZtU1fZElGdu+s22nPNhYFpGXVxIhMsp3gii/1l1zzkXIcWCOVBSkLCsLUktDcjz+GrFkgbqan8R0iJNtjQ0pto40+O25uN5/jflcmUdcHO2rrCj3UX2MDv4u1G+CqS2jsE47dVJTXJ8+pXzorIoyrVA15PuIloB/X7TptCDL+7wksByF5wbxo4vS1/lWliqDNdKQrJgGbtv6MaX8zzkixpKe2l/XlGprT4Fxz2fM7GsxpFyOSjTFHNOO6xevGoKzEUpm3fims7DpubSktKSvyZDAjfW/oKslpUXNyY9pbr3g+8cAulhWAlvUG5IyovzPN/VwDANCYjrESf31DVNADGOytsn9DfWAA4xqyQY/VXm5n3q9RLKf+Je/SHUAlv2frp83vunHXNqtOjTeGHq3S9mTlg5/FVZJyDlPuKX/rMMpB33MIZHRsY7Q/WOKC+7UC+VBXcQ7bkmTvjA064YjKHxm7OzQVbgsLmesUQgPR/4acSdSTlWQ2zYLimSl0g9v5sv1pY0k7Pi/Ick7LlYV2bJ/fFdy9syZtr0/anh168fDlHHCT8JMISsM8Zj5EnqTIPCweMGCrtQjjR4FL3kE8SMAwN2N/M8AAP4dvfj5pwksp/5G7AQALmBoIN14Y4hXgtGnV4JrO7qIny5owIWQZw0YcTpo8EbYEnao4HPOlpcFmSo1ddeDFv0G6eCyFEUAr01ZeylLAWRkOb4fQFqmCihFIPc98KMeAuCHwaVC3jIpkSo0x0eTxg0ANoM7L8TfZi/M3WkvQpIbvUnZiyPQC08u37hXQQD8RFmOo5/GUfoFV6eBilwpm35jDOhkYWUXRiKNWLpHY8a1F5QbzcaCN9MZwC6OtiplmUHIVjaHI1Ia14Fs1580zJMqlUWnuN2gFila2fQyALRRXo92HS/YJ+MITirDJa9NkSa+LKp1ddt0GtTL8IUWJ/doJkmJ4qlbPg1tern8ZkCqyYQRl5N2FuwV5jujJebQLdOWw8pUbtZDSivDGoEt0IcwCgZ7jASUPxl2xsh5) format('woff2');font-weight:500;font-style:normal;font-display:block}
.ch1t{display:inline-block;font-family:'Exo2CH',var(--display);font-style:italic;line-height:1;white-space:nowrap;letter-spacing:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:geometricPrecision}
.ch1t i{font-style:normal;font-weight:400}
.ch1t b{font-weight:800;font-style:italic;margin-left:.1em}
.kb-pop .ch1t{font-size:1.18em;color:var(--yellow);margin-left:1px;padding-right:.08em}
.kb-pop .ch1t i{font-weight:400}
.kb-pop .pc-l{align-items:baseline}
.pc-c .ch1t{color:#111}
.solo-title .ch1t{font-size:30px;color:var(--yellow);padding-right:0}
/* the chordhouse.app wordmark: Exo 2 (ch1's typeface), "chordhouse" upright, ".app" bold italic in TCH yellow */
.cha{font-family:'Exo 2',var(--display);font-weight:500;font-style:normal;font-size:28px;line-height:1;letter-spacing:0;color:#FBF6EC;text-decoration:none;white-space:nowrap;-webkit-font-smoothing:antialiased}
.cha b{font-weight:800;font-style:italic;color:#F6A801;padding-right:.06em}
.kb-brand.kbb-hide{opacity:0!important;transition:none!important}
.midi-menu{position:fixed;z-index:9000;display:flex;flex-direction:column;gap:2px;min-width:170px;padding:6px;border-radius:14px;background:#1b1a18;border:1px solid #3a3630;box-shadow:0 14px 34px rgba(0,0,0,.55);font:700 14px/1.2 Nunito,sans-serif}
.midi-menu button{all:unset;box-sizing:border-box;cursor:pointer;padding:10px 14px;border-radius:9px;color:#FBF6EC;text-align:left}
.midi-menu button:hover,.midi-menu button:focus-visible{background:rgba(246,168,1,.14);color:#fff}
.midi-menu .mm-off{color:#ff8a7a}
@media (max-width:520px){.solo-title .cha{font-size:22px}}
/* full screen: the same wordmark, always 20px above the top of the rig (its switches included) */
html body.solo.fs-on .fs-brand.fsb-on.fsb-on{top:var(--fsb-top,8px)!important;left:var(--fsb-l,0px)!important;right:auto!important;width:var(--fsb-w,100%)!important;transition:top .25s ease,left .25s ease;height:auto!important;padding:0!important;align-items:center!important}
/* full screen: the same wordmark pressed into the page, like the ch1 mark was: a fill a touch darker than the background,
a faint lit lower edge and a shadowed upper edge */
body.solo.fs-on .fs-brand .cha{font-size:30px;color:rgba(255,255,255,.10);text-shadow:0 1px 0 rgba(255,255,255,.12),0 -1px 0 rgba(0,0,0,.75),0 0 1px rgba(0,0,0,.4)}
body.solo.fs-on .fs-brand .cha b{color:rgba(246,168,1,.16)}
/* optical centring: the lowercase letters sit low under the tall h, so lift the mark a touch to look centred in the bar */
.solo-title .ch1t{position:relative;top:-.075em}
@media (max-width:520px){.solo-title .ch1t{font-size:27px}}
.ch1-cta .btn .ch1t{font-size:1.32em;color:var(--black);padding-right:.06em}
.pg-h-ch1{display:block!important;white-space:nowrap}
.pg-h-ch1 .ch1t{font-size:1.32em;color:var(--black);padding-right:.06em;margin-left:.08em;vertical-align:baseline}
.pg-h-ch1{margin-bottom:12px!important}
.pg-later{display:block;margin:2px auto 10px;padding:6px 12px;background:none;border:0;font:700 13.5px var(--body);color:#8a7f6c;cursor:pointer;border-radius:999px}
/* (2026-10-27) a phone on its side: the card was taller than the screen and Join sat below the bottom edge. On short, wide screens it
lays out in two columns, the message on the left and the form on the right, so everything fits without scrolling */
.pg-f{display:contents}
@media (orientation:landscape) and (max-height:520px) and (min-width:560px){
.pgate{padding:10px;place-items:center}
.pgate .pg-card{max-width:min(780px,calc(100vw - 20px));display:grid;grid-template-columns:1fr 1fr;grid-auto-flow:row dense;column-gap:26px;align-items:start;padding:16px 22px 12px;text-align:left;max-height:calc(100vh - 20px);overflow-y:auto}
.pgate .pg-card>.pg-v{display:contents}
.pgate .pg-card>*,.pgate .pg-card>.pg-v>*{grid-column:1}
.pgate .pg-card .pg-f{display:flex;flex-direction:column;justify-content:center;grid-column:2;grid-row:1 / span 7;align-self:center;padding:4px 0}
.pgate .pg-card .pg-f .pg-in{height:42px;margin-bottom:8px}
.pgate .pg-card .pg-f .pg-go{min-height:44px}
.pgate .pg-card .pg-f .pg-links{margin:6px 0 2px;column-gap:16px}.pgate .pg-card .pg-f .pg-links>span{display:none}
.pgate .pg-card>.pg-later{grid-column:2;margin:4px auto 0}
.pgate .pg-card .pg-logo{width:48px;height:48px;margin:0 0 8px}
.pgate .pg-card .pg-fk{text-align:left}
.pgate .pg-card h2{font-size:24px;margin:0 0 4px}
.pgate .pg-card .pg-price{justify-content:flex-start;margin:0 0 6px}.pgate .pg-card .pg-price s+b+span{text-align:left}
.pgate .pg-card .pg-p{font-size:13.5px;line-height:1.45;margin:0 0 8px}
.pgate .pg-card .pg-s{font-size:11.5px;line-height:1.4;margin:0}
}
@media (orientation:landscape) and (max-height:400px) and (min-width:560px){
.pgate .pg-card{padding:12px 18px 10px;column-gap:20px}
.pgate .pg-card .pg-logo{width:38px;height:38px;margin:0 0 6px}
.pgate .pg-card h2{font-size:21px}
.pgate .pg-card .pg-p{font-size:12.5px;line-height:1.4;margin:0 0 6px}
.pgate .pg-card .pg-price{margin:0 0 4px;font-size:13px}
.pgate .pg-card .pg-s{font-size:10.5px}
.pgate .pg-card .pg-f .pg-in{height:38px;margin-bottom:6px}
}
.pg-later[hidden]{display:none}
.pg-v[data-v=held] .pg-go{margin-bottom:14px}
.pg-later:hover{color:var(--black);background:rgba(17,17,17,.05)}
.pgate{cursor:pointer}.pg-card,.ac-card{cursor:auto}
body.solo .lcd{padding-bottom:22px}
.lcd-wm{position:absolute;left:12px;right:12px;bottom:5px;display:flex;align-items:baseline;gap:8px;color:#f6a801;opacity:.62;pointer-events:none;user-select:none}
.lcd-wm .ch1t{font-size:14px;color:#f6a801;text-transform:none;letter-spacing:0;font-family:'Exo2CH',sans-serif}
.lcd-wm{text-transform:none}
.lcd-wm,.lcd-wm *{text-shadow:0 0 3px rgba(246,168,1,.25)!important}
.lcd-wm .ch1t i{font-weight:400}
.lcd-id{text-align:center;justify-self:center;font:400 13px/1 'VT323',monospace;letter-spacing:.12em;font-style:normal;opacity:.55;white-space:nowrap}
.lcd-id:empty{flex:1}
body.solo .lcd-wm.t4 small{display:none!important}body.solo .lcd-wm.t5 .lcd-id{display:none!important}
.lcd-wm.t1{gap:6px}.lcd-wm.t1 .lcd-id{letter-spacing:.04em;font-size:12px}.lcd-wm.t1 small{font-size:9.5px;letter-spacing:.03em}
.lcd-wm.t2 .ch1t{font-size:12.5px}.lcd-wm.t2 .lcd-id{font-size:11px;letter-spacing:0}.lcd-wm.t2 small{font-size:9px;letter-spacing:0}
.lcd-wm.t3 .ch1t{font-size:11.5px}.lcd-wm.t3 .lcd-id{font-size:10.5px;letter-spacing:0}.lcd-wm.t3 small{font-size:8.5px}
.lcd-wm small{margin-left:auto;font:500 10.5px/1 'Exo2URL',sans-serif;letter-spacing:.06em;opacity:.8;text-transform:lowercase}
body:not(.solo) .lcd-wm{display:none}
body.solo .lcd-wm{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:baseline}
body.solo .lcd-wm .ch1t{justify-self:start;white-space:nowrap}
body.solo .lcd-wm.wm-flow{display:flex}body.solo .lcd-wm.wm-flow .lcd-id{flex:1}body.solo .lcd-wm.wm-flow small{margin-left:auto}body.solo .lcd-wm small{justify-self:end;margin-left:0;white-space:nowrap}
/* chord screen size: the chord text grows with the screen's height */
body.solo .lcd-main{height:calc(44px * var(--lcd-k,1))}
body.solo .lcd-main b{font-size:calc(46px * var(--lcd-k,1));line-height:calc(42px * var(--lcd-k,1))}
body.solo .lcd-main i{font-size:calc(30px * var(--lcd-k,1));line-height:calc(30px * var(--lcd-k,1))}
body.solo .lcd-row{font-size:calc(21px * (.55 + .45 * var(--lcd-k,1)));height:calc(20px * (.55 + .45 * var(--lcd-k,1)))}
.lcd-grip{display:none}
body.solo .lcd-grip{display:block;position:absolute;z-index:4;touch-action:none}
body.solo .lcd-gr{top:0;bottom:12px;right:0;width:10px;cursor:ew-resize}
body.solo .lcd-gb{left:12px;right:12px;bottom:0;height:8px;cursor:ns-resize}
body.solo .lcd-gc{right:0;bottom:0;width:16px;height:16px;cursor:nwse-resize}
body.solo .lcd-gc::after{content:"";position:absolute;right:3px;bottom:3px;width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;opacity:0;transition:opacity .2s}
body.solo .lcd:hover .lcd-gc::after,body.solo .lcd.sizing .lcd-gc::after{opacity:.45}
@media (hover:none){body.solo .lcd-gc::after{opacity:.3}}
body.solo .lcd-gr::after,body.solo .lcd-gb::after{content:"";position:absolute;background:currentColor;opacity:0;border-radius:2px;transition:opacity .2s}
body.solo .lcd-gr::after{right:2px;top:50%;width:2px;height:22px;margin-top:-11px}body.solo .lcd-gb::after{bottom:2px;left:50%;height:2px;width:22px;margin-left:-11px}
body.solo .lcd-gr:hover::after,body.solo .lcd-gb:hover::after{opacity:.5}
@media (max-width:620px){body.solo .lcd-gr{display:none}body.solo .lcd-gc{cursor:ns-resize}}
html.ffo-lcdsize:where(:not(.fft-lcdsize)) .lcd-grip{display:none!important}
/* ch1: chord screen in the centre (switch: lcdcenter). The panels join one row with the screen between them; the script puts
the screen at the spot nearest the middle of the keyboard. Wide screens only (narrower ones already show the screen on its own row) */
@media (min-width:1241px){
body.solo.lcd-mid .rig-panel{column-gap:8px}
body.solo.lcd-mid .rig-panel .mix{display:contents!important}
body.solo.lcd-mid .rig-panel .jy{margin-right:6px!important}
body.solo.lcd-mid .rig-panel .kb-side{margin:0 10px!important}
body.solo.lcd-mid.np-fit1 .rig-panel .kb-side{margin:0 2px!important}
}
/* ch1: your own arrangement (switch: arrange). Same one-row layout as the centred screen, in the order you chose */
@media (min-width:1241px){
html:not(.ffo-arrange:where(:not(.fft-arrange))) body.solo.np-arr .rig-panel{column-gap:8px}
html:not(.ffo-arrange:where(:not(.fft-arrange))) body.solo.np-arr .rig-panel .mix{display:contents!important}
html:not(.ffo-arrange:where(:not(.fft-arrange))) body.solo.np-arr .rig-panel .jy{margin:0 6px 0 0!important}
html:not(.ffo-arrange:where(:not(.fft-arrange))) body.solo.np-arr .rig-panel .kb-side{margin:0 10px!important}
html:not(.ffo-arrange:where(:not(.fft-arrange))) body.solo.np-arr.np-fit1 .rig-panel .kb-side{margin:0 2px!important}
}
html.ffo-arrange:where(:not(.fft-arrange)) .adv-arr,html.ffo-arrange:where(:not(.fft-arrange)) .arr-bar,html.ffo-arrange:where(:not(.fft-arrange)) .arr-ov{display:none!important}
/* ---- Organ (switch: organ) ---- */
html.ffo-organ:where(:not(.fft-organ)) .mix-organ,html.ffo-organ:where(:not(.fft-organ)):not(.x) body .rig-panel .mix>.mix-strip.mix-organ.mix-organ{display:none!important}
html.ffo-pan:where(:not(.fft-pan)) .pan-box{display:none!important}
.tx-guide{position:fixed;z-index:54;pointer-events:none;opacity:0;transition:opacity .12s;background:var(--kl,#F6A801);box-shadow:0 0 6px var(--kl,#F6A801)}
.tx-gv{left:50%;top:0;bottom:0;width:1px;margin-left:-.5px}.tx-gh{top:50%;left:0;right:0;height:1px;margin-top:-.5px}
.tx-guide.on{opacity:.75}
/* ---- retro clock (switch: clock) ---- */
.jy-clock{display:none}
/* the clock inside the chord screen (wheel off): on the top line before the Sus tag, in the screen's own amber, a little dimmer */
html:not(.ffo-clock:where(:not(.fft-clock))) body.solo:not(.mob) .lcd-tags>.jy-clock.jc-lcd{display:inline-flex;align-items:baseline;gap:0;margin:0 2px 0 0;padding:0;background:none;box-shadow:none;border-radius:0;opacity:.6}
.lcd-tags>.jy-clock.jc-lcd b,.lcd-tags>.jy-clock.jc-lcd i{font-size:inherit;color:inherit;text-shadow:none}
.lcd-tags>.jy-clock.jc-lcd small{font-size:.7em;margin-left:2px;color:inherit}
html:not(.ffo-clock:where(:not(.fft-clock))) body.solo:not(.mob) .lcd-tags>.jy-clock.jc-lcd.jc-own{position:absolute;right:12px;top:30px;margin:0}
html:not(.ffo-clock:where(:not(.fft-clock))) body.solo .jy .jy-clock{display:flex;align-items:baseline;justify-content:center;gap:1px;margin-top:2px;padding:2px 8px 1px;border-radius:5px;background:rgba(0,0,0,.28);box-shadow:inset 0 0 0 1px rgba(255,255,255,.03);opacity:.62;transition:opacity .3s}
html:not(.ffo-clock:where(:not(.fft-clock))) body.solo .jy .jy-clock:hover{opacity:1}
.jy-clock b,.jy-clock i{font:400 17px/1 'VT323',monospace;font-style:normal;color:#c98f1c;text-shadow:0 0 6px rgba(255,170,30,.3);font-variant-numeric:tabular-nums}
.jy-clock i{animation:jcBlink 2s steps(1) infinite;margin:0 1px}
.jy-clock small{font:400 11px/1 'VT323',monospace;letter-spacing:.06em;color:#8a6a22;margin-left:4px}
.jy-clock small:empty{display:none}
@keyframes jcBlink{50%{opacity:.15}}
@media (prefers-reduced-motion:reduce){.jy-clock i{animation:none}}
/* ---- Stage (switch: stage) ---- */
html.ffo-stage:where(:not(.fft-stage)) .stg-btn,html.ffo-stage:where(:not(.fft-stage)) .stg-card,html.ffo-stage:where(:not(.fft-stage)) .stg-bar{display:none!important}
.stg-bar{display:none}
body.solo.stg-on .stg-bar{display:flex;align-items:center;gap:12px;margin:0 0 12px;padding:8px;border-radius:14px;background:linear-gradient(180deg,#1d1b18,#141311);box-shadow:inset 0 0 0 1px #2e2b27,0 6px 18px rgba(0,0,0,.35)}
.stg-bar.stg-flash{animation:stgF .6s ease-out}@keyframes stgF{0%{box-shadow:inset 0 0 0 2px var(--yellow,#F6A801),0 0 24px rgba(246,168,1,.35)}100%{}}
.stg-nav{flex:none;width:58px;height:58px;border-radius:12px;border:0;display:grid;place-items:center;color:#111;background:linear-gradient(180deg,#ffc23d,#F6A801);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 3px 0 #8a5d00;cursor:pointer}
.stg-nav:active{transform:translateY(2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 1px 0 #8a5d00}
.stg-nav:disabled{background:#2a2723;color:#5a544a;box-shadow:none;cursor:default}
.stg-now{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:3px}
.stg-n{font:800 10.5px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:#8e8573;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stg-now b{font:800 26px/1.05 'Exo 2','Exo2CH',var(--body);color:#FBF6EC;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stg-now em{font:400 17px/1 'VT323',monospace;font-style:normal;color:var(--yellow,#F6A801);letter-spacing:.04em}
.stg-next{flex:0 1 220px;min-width:0;display:flex;flex-direction:column;gap:4px;padding-left:12px;border-left:1px solid #2e2b27}
.stg-next span{font:800 10px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:#7d7566}.stg-next b{font:800 15px/1.1 var(--body);color:#bfb6a4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stg-tools{flex:none;display:flex;gap:6px;margin-left:4px}
.stg-tools button{height:34px;padding:0 12px;border-radius:999px;border:1px solid #3a3630;background:transparent;color:#cfc5b2;font:800 12px/1 var(--body);cursor:pointer}
.stg-tools button:hover{border-color:var(--yellow,#F6A801)}.stg-clean[aria-pressed="true"]{background:var(--yellow,#F6A801)!important;color:#111!important;border-color:var(--yellow,#F6A801)!important}
.stg-tools .stg-x{width:34px;padding:0;font-size:18px}
html:not(.ffo-stage:where(:not(.fft-stage))):not(.x) body.solo.stg-clean .rig-panel .mix>.mix-strip.mix-strip,html body.solo.stg-clean .rig-panel .mix>.mix-strip,html body.solo.stg-clean .rig-panel>.jy,html body.solo.stg-clean .rig-panel .mix>.mix-head{display:none!important}
html body.solo.stg-clean .rig-panel{justify-content:center!important}
html body.solo.stg-clean .rig-panel .kb-side{order:1!important;margin:0 auto!important}
.stg-card .av-body{display:flex;flex-direction:column;gap:10px}
html.ffo-sounds:where(:not(.fft-sounds)) .snd-btn,html.ffo-sounds:where(:not(.fft-sounds)) .snd-card{display:none!important}
.snd-card .av-body{display:flex;flex-direction:column;gap:10px}
.snd-card .stg-pick svg{display:block;margin:0 auto}.snd-card .stg-list li.cur .stg-pick{background:var(--yellow,#F6A801);color:#111}
.snd-card .stg-tip.snd-ok{color:var(--yellow,#F6A801)}
.snd-file{display:flex;gap:8px;justify-content:center;padding-top:8px;border-top:1px solid #2a2723}.snd-file button{height:30px;padding:0 12px;border-radius:999px;border:1px solid #3a3630;background:transparent;color:#cfc5b2;font:800 11.5px/1 var(--body);cursor:pointer}.snd-file button:hover{border-color:var(--yellow,#F6A801)}
.stg-set{height:34px;border-radius:10px;border:1px solid #3a3630;background:#141311;color:#FBF6EC;font:800 15px/1 var(--body);padding:0 12px}
.stg-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;max-height:min(46vh,380px);overflow:auto}
.stg-list li{display:flex;align-items:center;gap:8px;padding:6px;border-radius:12px;background:#1a1816;border:1px solid #2a2723}
.stg-list li.cur{border-color:var(--yellow,#F6A801)}
.stg-list .stg-empty{justify-content:center;color:#8e8573;font:700 13px/1.4 var(--body);padding:14px}
.stg-pick{flex:none;width:30px;height:30px;border-radius:8px;border:0;background:#2a2723;color:#FBF6EC;font:900 13px/1 var(--body);cursor:pointer}.stg-list li.cur .stg-pick{background:var(--yellow,#F6A801);color:#111}
.stg-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.stg-t input{width:100%;height:22px;border:0;background:transparent;color:#FBF6EC;font:800 13.5px/1 var(--body);padding:0;outline:none}.stg-t input:focus{box-shadow:0 1px 0 var(--yellow,#F6A801)}
.stg-t em{font:400 15px/1 'VT323',monospace;font-style:normal;color:#a07a22;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stg-a{flex:none;display:flex;gap:3px}.stg-a button{height:26px;min-width:26px;padding:0 6px;border-radius:7px;border:1px solid #3a3630;background:transparent;color:#bfb6a4;font:800 10.5px/1 var(--body);cursor:pointer}.stg-a button:disabled{opacity:.3;cursor:default}.stg-a button:hover:not(:disabled){border-color:var(--yellow,#F6A801);color:#FBF6EC}
.stg-add{display:flex;gap:6px}.stg-add input{flex:1;min-width:0;height:36px;border-radius:10px;border:1px solid #3a3630;background:#141311;color:#FBF6EC;font:700 13.5px/1 var(--body);padding:0 12px}
.stg-addb{flex:none;height:36px;padding:0 12px;border-radius:10px;border:1px solid var(--yellow,#F6A801);background:transparent;color:#FBF6EC;font:800 12.5px/1 var(--body);cursor:pointer}.stg-addb:hover{background:var(--yellow,#F6A801);color:#111}
.stg-go{display:flex}.stg-live{flex:1;height:42px;border-radius:999px;border:0;background:var(--yellow,#F6A801);color:#111;font:900 14px/1 var(--body);cursor:pointer}.stg-live:disabled{background:#2a2723;color:#5a544a;cursor:default}
.stg-tip{color:#8e8573;font:600 11.5px/1.45 var(--body)}
@media (max-width:820px){.stg-next{display:none}.stg-now b{font-size:21px}.stg-nav{width:50px;height:50px}}
@media (max-width:520px){body.solo.stg-on .stg-bar{flex-wrap:wrap;gap:10px}.stg-nav{width:46px;height:46px}.stg-now b{font-size:18px}.stg-tools{flex:1 0 100%;justify-content:center;order:5;margin:0}}
.pan-box{margin:4px 0 12px;padding-top:12px;border-top:1px solid #2e2b27}
.pan-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.pan-h span{font:900 11px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:#8e8573}
.pan-c{height:24px;padding:0 10px;border-radius:999px;border:1px solid #3a3630;background:transparent;color:#cfc5b2;font:800 11px/1 var(--body);cursor:pointer}.pan-c:hover{border-color:var(--yellow,#F6A801)}
.pan-g{display:grid;grid-template-columns:1fr;gap:4px}
.pan-r{display:grid;grid-template-columns:62px minmax(0,1fr) 34px;align-items:center;gap:6px;min-width:0;cursor:pointer}
.pan-n{font:800 11px/1 var(--body);color:#cfc5b2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pan-s{position:relative;display:block;height:18px}
.pan-s input{position:absolute;inset:0;width:100%;height:18px;margin:0;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer;z-index:1}
.pan-s input::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:#3a3630}
.pan-s input::-moz-range-track{height:4px;border-radius:2px;background:#3a3630}
.pan-s input::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;margin-top:-4px;border-radius:50%;background:var(--yellow,#F6A801);box-shadow:0 1px 3px rgba(0,0,0,.6)}
.pan-s input::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:50%;background:var(--yellow,#F6A801)}
.pan-mid{position:absolute;left:50%;top:3px;width:2px;height:12px;margin-left:-1px;border-radius:1px;background:#5a544a;pointer-events:none}
.pan-v{font:800 11px/1 var(--body);color:var(--yellow,#F6A801);text-align:right}.pan-r.off .pan-v{color:#7d7566}
body.solo #eqPop{max-height:calc(100vh - 16px);overflow-y:auto;overscroll-behavior:contain}
html.ffo-drones:where(:not(.fft-drones)) [data-pad^="d-"]{display:none!important}
.mix-organ .org-body{display:flex;flex-wrap:wrap;row-gap:10px;align-items:flex-end;gap:12px}
/* narrow panels (phones, or the organ folded into a tight column): the drawbars take their own row above the rest, so nothing runs past the case */
/* the container stops the strip sizing from its own content, so it needs a real default width (it collapsed to a 12px sliver
without one); it can still shrink in a tight row, and a width you set by dragging (ms-sized) still wins */
/* wider screens: two columns and two rows, so the Organ is no taller than the other panels and switching it on never pushes
the keys down. Left: name, sound and the knobs. Right: the drawbars, with Slow and Perc underneath */
@media (min-width:621px){
body.solo .rig-panel .mix>.mix-strip.mix-organ:not(.ms-col){display:grid!important;grid-template-columns:max-content max-content;grid-template-rows:auto 1fr;column-gap:14px;row-gap:8px;align-content:start;flex:0 0 auto;min-width:0}
body.solo .rig-panel .mix-organ:not(.ms-col)>.ms-h{grid-column:1;grid-row:1;min-width:0;align-self:start}
body.solo .rig-panel .mix-organ:not(.ms-col)>.org-body{display:contents}
body.solo .rig-panel .mix-organ:not(.ms-col) .org-dbs{grid-column:2;grid-row:1;align-self:start;flex:none;margin-right:26px}
body.solo .rig-panel .mix-organ:not(.ms-col) .org-rod{height:50px}
body.solo .rig-panel .mix-organ:not(.ms-col) .org-side{grid-column:2;grid-row:2;flex-direction:row;gap:6px;align-self:end}
body.solo .rig-panel .mix-organ:not(.ms-col) .org-side>*{flex:1 1 0;min-width:0}
body.solo .rig-panel .mix-organ:not(.ms-col) .org-body>.ms-k{grid-column:1;grid-row:2;align-self:end;justify-content:flex-start}
}
}
@container org (max-width:236px){.mix-organ .org-dbs{flex:1 1 100%;justify-content:center}.mix-organ .org-side,.mix-organ .ms-k{justify-content:center}}
@media (max-width:620px){body.solo .rig-panel .mix-organ .org-body{grid-column:1/-1!important;grid-row:2!important;width:100%!important;box-sizing:border-box;justify-content:center!important}.mix-organ .org-dbs{flex:1 1 100%;justify-content:center}}
.org-dbs{display:flex;gap:4px;padding:6px 6px 4px;border-radius:8px;background:linear-gradient(180deg,#141311,#0c0b0a);box-shadow:inset 0 2px 6px rgba(0,0,0,.8),0 0 0 1px #2a2723}
.org-db{--l:0;display:flex;flex-direction:column;align-items:center;gap:3px;width:15px;cursor:ns-resize;touch-action:none;outline:none}
.org-rod{position:relative;display:block;width:9px;height:72px;border-radius:2px;background:repeating-linear-gradient(180deg,#1f1d1a 0 7px,#2a2723 7px 8px)}
.org-rod::before{content:"";position:absolute;left:0;right:0;top:0;height:calc(var(--l) / 8 * (100% - 14px));border-radius:2px 2px 0 0;background:linear-gradient(90deg,rgba(0,0,0,.35),rgba(255,255,255,.12) 45%,rgba(0,0,0,.35));background-color:var(--rod,#d9d1c3);transition:height .06s}
.org-rod b{position:absolute;left:-3px;right:-3px;top:calc(var(--l) / 8 * (100% - 14px));height:14px;border-radius:3px;display:grid;place-items:center;font:800 8.5px/1 var(--body);color:var(--cap-ink,#111);background:var(--cap,#efe8da);box-shadow:0 2px 3px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.5);transition:top .06s}
.org-db.br{--rod:#7a4b2a;--cap:#8b5a35;--cap-ink:#f3e6d4}.org-db.bk{--rod:#2c2a28;--cap:#1b1a19;--cap-ink:#e9e1d1}.org-db.wh{--rod:#d9d1c3;--cap:#f1eadc;--cap-ink:#111}
.org-db span{font:700 7.5px/1 var(--body);color:#7d7566;white-space:nowrap}
.org-db:focus-visible .org-rod b{outline:2px solid var(--yellow,#F6A801);outline-offset:1px}
.org-side{display:flex;flex-direction:column;gap:6px}
.org-rot,.org-perc{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-width:64px;height:28px;padding:0 9px;border-radius:999px;border:1px solid #3a3630;background:linear-gradient(180deg,#2a2723,#1a1816);color:#cfc5b2;font:800 10.5px/1 var(--body);letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.org-rot[aria-pressed="true"]{color:#111;background:var(--yellow,#F6A801);border-color:var(--yellow,#F6A801)}
.org-rot[aria-pressed="true"] svg{animation:orgSpin .6s linear infinite}.org-rot svg{animation:orgSpin 3s linear infinite}
@keyframes orgSpin{to{transform:rotate(360deg)}}
.org-perc em{font-style:normal;color:#8e8573;font-weight:700}.org-perc[aria-pressed="true"]{border-color:var(--yellow,#F6A801)}.org-perc[aria-pressed="true"] em{color:var(--yellow,#F6A801)}
@media (prefers-reduced-motion:reduce){.org-rot svg{animation:none!important}}
/* ch1 on phones (switch: phonekeys): the keys come up near the top so you can play without scrolling. Portrait: top buttons, chord
screen, keys, then the wheels and panels, then the tools. Landscape phones: top buttons, keys, then the screen and panels */
@media (max-width:620px){
html:not(.ffo-phonekeys:where(:not(.fft-phonekeys))) body.solo .kb-wrap{display:flex;flex-direction:column}
html:not(.ffo-phonekeys:where(:not(.fft-phonekeys))) body.solo .kb-wrap>*{order:20}
html:not(.ffo-phonekeys:where(:not(.fft-phonekeys))) body.solo .kb-wrap>.kb-hint{order:0;border-bottom:3px solid var(--yellow,#F6A801);padding-bottom:12px;margin-bottom:12px}
html:not(.ffo-phonekeys:where(:not(.fft-phonekeys))) body.solo .kb-wrap>.metro{order:1}
html:not(.ffo-phonekeys:where(:not(.fft-phonekeys))) body.solo .kb-wrap>.stg-bar{order:1}
html:not(.ffo-phonekeys:where(:not(.fft-phonekeys))) body.solo .kb-wrap>.rig-panel{display:contents}
html:not(.ffo-phonekeys:where(:not(.fft-phonekeys))) body.solo .rig-panel>.kb-side{order:2;margin-bottom:12px!important}
html:not(.ffo-phonekeys:where(:not(.fft-phonekeys))) body.solo .kb-wrap>.ctr{order:3}
html:not(.ffo-phonekeys:where(:not(.fft-phonekeys))) body.solo .kb-wrap>.nmb{order:3}
html:not(.ffo-phonekeys:where(:not(.fft-phonekeys))) body.solo .kb-wrap>.kb-scroll{order:4}
html:not(.ffo-phonekeys:where(:not(.fft-phonekeys))) body.solo .kb-wrap>.kb-rail{order:5}
html:not(.ffo-phonekeys:where(:not(.fft-phonekeys))) body.solo .kb-wrap>.lp-lanes{order:6}
html:not(.ffo-phonekeys:where(:not(.fft-phonekeys))) body.solo .rig-panel>.jy{order:7;margin-top:16px!important}
html:not(.ffo-phonekeys:where(:not(.fft-phonekeys))) body.solo .rig-panel>.mix{order:8}
html:not(.ffo-phonekeys:where(:not(.fft-phonekeys))) body.solo .kb-wrap>.kb-tools{order:9}
}
@media (min-width:621px) and (max-width:1000px) and (max-height:500px){
html:not(.ffo-phonekeys:where(:not(.fft-phonekeys))) body.solo .kb-wrap{display:flex;flex-direction:column}
html:not(.ffo-phonekeys:where(:not(.fft-phonekeys))) body.solo .kb-wrap>*{order:20}
html:not(.ffo-phonekeys:where(:not(.fft-phonekeys))) body.solo .kb-wrap>.kb-hint{order:0}
html:not(.ffo-phonekeys:where(:not(.fft-phonekeys))) body.solo .kb-wrap>.metro{order:1}
html:not(.ffo-phonekeys:where(:not(.fft-phonekeys))) body.solo .kb-wrap>.stg-bar{order:1}
html:not(.ffo-phonekeys:where(:not(.fft-phonekeys))) body.solo .kb-wrap>.ctr{order:3}
html:not(.ffo-phonekeys:where(:not(.fft-phonekeys))) body.solo .kb-wrap>.nmb{order:3}
html:not(.ffo-phonekeys:where(:not(.fft-phonekeys))) body.solo .kb-wrap>.kb-scroll{order:4}
html:not(.ffo-phonekeys:where(:not(.fft-phonekeys))) body.solo .kb-wrap>.kb-rail{order:5}
html:not(.ffo-phonekeys:where(:not(.fft-phonekeys))) body.solo .kb-wrap>.lp-lanes{order:6}
html:not(.ffo-phonekeys:where(:not(.fft-phonekeys))) body.solo .kb-wrap>.rig-panel{order:7;margin-top:16px}
html:not(.ffo-phonekeys:where(:not(.fft-phonekeys))) body.solo .kb-wrap>.kb-tools{order:9}
}
.arr-ov{display:none}
body.np-arranging .rig-panel .kb-side,body.np-arranging .rig-panel>.jy,body.np-arranging .rig-panel .mix>.mix-strip{position:relative}
body.np-arranging .arr-ov{display:flex;position:absolute;inset:0;z-index:60;align-items:center;justify-content:center;border:2px dashed rgba(246,168,1,.7);border-radius:12px;
background:rgba(14,13,12,.66);cursor:grab;touch-action:none;transition:background .15s,border-color .15s}
body.np-arranging .arr-ov:hover{background:rgba(14,13,12,.5);border-color:#F6A801}
.arr-ov span{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 13px;border-radius:999px;background:#111;border:1px solid #3a3630;color:#FBF6EC;font:800 11px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;box-shadow:0 6px 16px rgba(0,0,0,.5)}
.arr-ov span svg{color:#F6A801;flex:none}
.arr-ov.thin span{padding:0 8px}.arr-ov.thin span b{display:none}
body.np-arranging .arr-ov.drag{cursor:grabbing;border-style:solid;border-color:#F6A801;background:rgba(246,168,1,.16)}
.arr-ov:focus-visible{outline:3px solid #F6A801;outline-offset:2px}
.arr-bar{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:9000;display:flex;align-items:center;gap:8px;max-width:calc(100vw - 24px);padding:7px 7px 7px 18px;border-radius:999px;
background:#111;border:1px solid #3a3630;box-shadow:0 14px 40px rgba(0,0,0,.55);color:#cfc5b2;font:600 13px/1.2 var(--body)}
.arr-bar[hidden]{display:none}
.arr-bar .arr-t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-right:6px}
.arr-bar b{color:#F6A801;margin-right:10px;letter-spacing:.1em;text-transform:uppercase;font-size:12px;font-weight:800}
.arr-bar button{flex:none;height:34px;padding:0 16px;border-radius:999px;border:1px solid #3a3630;background:transparent;color:#FBF6EC;font:800 13px/1 var(--body);cursor:pointer}
.arr-bar button:hover{border-color:#F6A801}
.arr-bar .arr-done{background:#F6A801;color:#111;border-color:#F6A801}
@media (max-width:620px){.arr-bar .arr-t{display:none}.arr-bar{padding-left:7px}}
/* ---- song key chip (switch: songkey): a quiet pill above your Key ---- */
html.ffo-songkey:where(:not(.fft-songkey)) .sk-chip,html.ffo-songkey:where(:not(.fft-songkey)) .bm-key,html.ffo-songkey:where(:not(.fft-songkey)) .bm-spd,html.ffo-songkey:where(:not(.fft-songkey)) .bm-trr{display:none!important}
body.solo .rs-key{position:relative}
body.solo .sh-sel{display:inline-flex;align-items:center;gap:2px;height:44px;padding:0 4px;box-sizing:border-box;border-radius:999px;border:1px solid #3a3630;background:#262420;flex:none;color:var(--cream)}
html.ffo-shiftbar:where(:not(.fft-shiftbar)) body.solo .sh-sel,html.ffo-advanced:where(:not(.fft-advanced)) body.solo .sh-sel{display:none!important}
body.solo .sh-g{display:inline-flex;align-items:center;gap:1px}
body.solo .sh-sep{width:1px;height:22px;background:#3a3630;margin:0 1px}
body.solo .sh-b{width:18px;height:34px;flex:0 0 18px;padding:0;border:0;border-radius:8px;background:transparent;color:#bfb6a4;display:grid;place-items:center;cursor:pointer}
body.solo .sh-b:hover{color:var(--cream)}
body.solo .sh-v{display:inline-flex;align-items:baseline;justify-content:center;gap:3px;height:32px;min-width:0;padding:0 6px;box-sizing:border-box;border-radius:7px;border:0;cursor:pointer;background:radial-gradient(130% 150% at 50% 0,#3a2805 0,#1f1503 75%);box-shadow:inset 0 0 0 1px #5a400a,inset 0 0 10px rgba(0,0,0,.6);color:#9a7426;font:400 21px/32px 'VT323',monospace;letter-spacing:0}
body.solo .sh-v i{font:400 12px/1 'VT323',monospace;font-style:normal;letter-spacing:.04em;color:#a8801f}
body.solo .sh-v b{font-weight:400;min-width:1.5em;text-align:center}
body.solo .sh-v.on{color:#ffc23d;text-shadow:0 0 2px #ffb000,0 0 10px rgba(255,190,40,.55)}
body.solo .sh-v.on i{color:#e0a520;text-shadow:0 0 6px rgba(255,190,40,.4)}
body.solo .sh-b:focus-visible,body.solo .sh-v:focus-visible{outline:2px solid var(--kl,#F6A801);outline-offset:1px}
.sk-chip{position:absolute;left:0;bottom:calc(100% + 8px);z-index:25;display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 4px 0 10px;border-radius:999px;white-space:nowrap;
background:rgba(24,22,19,.94);border:1px solid #3a3630;box-shadow:0 8px 22px rgba(0,0,0,.45);color:#a99f8e;font:700 11.5px/1 var(--body);backdrop-filter:blur(6px);
transition:opacity .6s,transform .35s cubic-bezier(.2,.8,.2,1)}
.sk-chip[hidden]{display:none}
.sk-chip.show{animation:skIn .45s cubic-bezier(.2,.8,.2,1)}
@keyframes skIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.sk-chip.dim{opacity:.5}
.sk-chip:not(.dim){opacity:.88}.sk-chip:hover{opacity:1}
.sk-chip svg{color:var(--kl,#F6A801);flex:none}
.sk-chip .sk-t b{font:400 17px/1 'VT323',monospace;color:#ffc23d;letter-spacing:.03em;text-shadow:0 0 8px rgba(255,190,40,.35);margin-left:1px}
.sk-chip .sk-t i{font-style:normal;margin-left:7px;color:#7d7566}
.sk-chip .sk-use{height:22px;padding:0 10px;border-radius:999px;border:1px solid color-mix(in srgb,var(--kl,#F6A801) 55%,#3a3630);background:transparent;color:var(--cream);font:800 11px/1 var(--body);cursor:pointer}
.sk-chip .sk-use:hover{background:var(--kl,#F6A801);color:#111}
.sk-chip.in .sk-use{border-color:#3a3630;color:#8a8170;cursor:default;background:transparent}
.sk-chip .sk-x{width:22px;height:22px;border:0;border-radius:50%;background:transparent;color:#7d7566;font-size:15px;line-height:1;cursor:pointer;padding:0}
.sk-chip .sk-x:hover{color:var(--cream)}
.sk-chip .sk-ic{display:inline-grid;place-items:center;width:12px;height:12px;color:var(--kl,#F6A801)}
.sk-chip .sk-ic>*{grid-area:1/1}
.sk-chip .sk-eq{display:none;align-items:flex-end;gap:1.5px;height:11px}
.sk-chip .sk-eq b{width:2.5px;border-radius:1px;background:currentColor;animation:skEq .9s ease-in-out infinite}
.sk-chip .sk-eq b:nth-child(2){animation-delay:-.3s}.sk-chip .sk-eq b:nth-child(3){animation-delay:-.6s}
@keyframes skEq{0%,100%{height:3px}50%{height:11px}}
.sk-chip.listening .sk-ic svg{display:none}.sk-chip.listening .sk-eq{display:inline-flex}
.sk-chip .sk-ch{font-style:normal;margin-left:8px;padding-left:8px;border-left:1px solid #3a3630;color:#8e8573;font:400 15px/1 'VT323',monospace;letter-spacing:.02em;white-space:pre}
.sk-chip .sk-ear{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px;border-radius:999px;border:1px solid #3a3630;background:transparent;color:#cfc5b2;font:800 11px/1 var(--body);cursor:pointer}
.sk-chip .sk-ear:hover{border-color:var(--kl,#F6A801);color:var(--cream)}
.sk-chip .sk-ear svg{color:var(--kl,#F6A801)}
.sk-chip .sk-ear[hidden],.sk-chip .sk-use[hidden]{display:none}
@media (prefers-reduced-motion:reduce){.sk-chip.show{animation:none}.sk-chip .sk-eq b{animation:none;height:7px}}
/* background music: key line, speed and transpose */
.bm-key{margin:2px 0 0;font:700 12px/1.3 var(--body);color:#8a8170}
.bm-key b{font:400 17px/1 'VT323',monospace;color:#ffc23d;letter-spacing:.03em;margin:0 2px}
.bm-key button{margin-left:8px;height:22px;padding:0 10px;border-radius:999px;border:1px solid #3a3630;background:transparent;color:var(--cream);font:800 11px/1 var(--body);cursor:pointer}
.bm-key button:disabled{color:#8a8170;cursor:default}
.bm-row{display:grid;grid-template-columns:72px 30px 64px 30px;align-items:center;gap:4px 6px;font:800 12px/1 var(--body);color:#cfc6b4}
.bm-row small:empty{display:none}.bm-row small{grid-column:1/-1}
.bm-row button{width:30px;height:28px;border-radius:9px;border:1px solid #3a3630;background:#1d1b18;color:var(--cream);font:800 15px/1 var(--body);cursor:pointer;padding:0}
.bm-row button:disabled{opacity:.35;cursor:default}
.bm-row b{display:grid;place-items:center;height:28px;border-radius:7px;background:radial-gradient(130% 150% at 50% 0,#3a2805 0,#1f1503 75%);box-shadow:inset 0 0 0 1px #5a400a;color:#ffc23d;font:400 19px/1 'VT323',monospace;letter-spacing:.03em}
.bm-row small{font:600 11px/1.3 var(--body);color:#8a8170}
.bm-row[hidden],.bm-key[hidden]{display:none!important}
.sg-tools{display:grid;gap:6px;padding:8px 10px;border-radius:12px;background:#151412;border:1px solid #2c2a26}
html.ffo-songkey:where(:not(.fft-songkey)) .sg-tools{display:none!important}
/* ---------- ch1 key looks (switch: keylooks). Midnight: every key black, matte naturals and glossy raised sharps, each with a
faint line of its own light at the front, and pressed keys glow from inside. Pearl: every key white, sharps raised in pearl.
With Rainbow or Spectrum each key carries its own light colour ---------- */
html.ffo-keylooks:where(:not(.fft-keylooks)) .kl-xl{display:none!important}
html.ffo-handsplit:where(:not(.fft-handsplit)) .kl-hs-opt{display:none!important}
html.ffo-scalelight:where(:not(.fft-scalelight)) .kl-sl-opt{display:none!important}
html:not(.ffo-keylooks:where(:not(.fft-keylooks))) .kl-keys{grid-template-columns:repeat(3,minmax(0,1fr))!important}
/* Midnight colours: a row of dots under the key looks */
.kl-keys:has(.kl-kts){flex-wrap:wrap!important;height:auto!important;row-gap:4px}
/* two rows: a soft rounded box, not a capsule */
html body .kl-keys:has(.kl-kts){border-radius:16px!important}html body .kl-keys:has(.kl-kts)>button[role=radio]:not(.kl-kt){border-radius:11px!important}
.kl-keys .kl-kts{flex:0 0 100%;order:9;box-sizing:border-box;padding:6px 8px 4px!important;border-top:1px solid rgba(255,255,255,.06);grid-column:1/-1;display:flex;align-items:center;gap:8px;padding:6px 4px 2px;font:800 11px/1 var(--body);letter-spacing:.06em;text-transform:uppercase;color:#8a8170}
.kl-keys .kl-kts>span{margin-right:auto;white-space:nowrap}
.kl-keys button.kl-kt{flex:none;width:26px!important;height:26px;min-width:0;padding:0!important;border-radius:50%!important;border:2px solid transparent!important;background:transparent!important;display:grid;place-items:center;cursor:pointer}
.kl-keys button.kl-kt i{width:18px;height:18px;border-radius:50%;background:linear-gradient(180deg,color-mix(in srgb,var(--kt) 70%,#fff 12%),var(--kt) 55%,color-mix(in srgb,var(--kt) 70%,#000));box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 1px 2px rgba(0,0,0,.6)}
.kl-keys button.kl-kt[aria-checked="true"]{border-color:var(--kl,#F6A801)!important;box-shadow:0 0 8px color-mix(in srgb,var(--kl,#F6A801) 50%,transparent)}
.kl-keys button.kl-kt:hover i{transform:scale(1.08)}
body.solo .kl-pop .kl-keys button,body.solo .kl-pop [data-klm]{padding-left:4px!important;padding-right:4px!important;white-space:nowrap}
/* Midnight */
body.solo.keys-black #kb{background:#030303}
body.solo.keys-black #kb .kw{border:0;border-left:1px solid #000;border-radius:0 0 5px 5px}
body.solo.keys-black #kb .kw:not(.on):not(.ln-t):not(.heard):not(.sc-t):not(.sc-ok):not(.sc-no):not(.sg-t){background-color:#121214;
background-image:linear-gradient(0deg,color-mix(in srgb,var(--kl) 70%,transparent) 0,color-mix(in srgb,var(--kl) 70%,transparent) 2px,color-mix(in srgb,var(--kl) 14%,transparent) 2px,transparent 14px),linear-gradient(180deg,#09090a 0,#18181b 6%,#141416 60%,#0f0f11 100%);
box-shadow:inset -1px 0 0 rgba(255,255,255,.035),inset 1px 0 0 rgba(0,0,0,.8),0 1px 0 #000;color:#9a948a}
body.solo.keys-black #kb .kb-black{border:0;border-radius:0 0 4px 4px;overflow:hidden}
body.solo.keys-black #kb .kb-black:not(.on):not(.ln-t):not(.heard):not(.sc-t):not(.sc-ok):not(.sc-no):not(.sg-t){background-color:#1e1e21;
background-image:linear-gradient(0deg,color-mix(in srgb,var(--kl) 75%,transparent) 0,color-mix(in srgb,var(--kl) 75%,transparent) 2px,transparent 2px),linear-gradient(90deg,rgba(255,255,255,.07) 0,transparent 18%,transparent 78%,rgba(255,255,255,.1) 100%),linear-gradient(180deg,#2c2c30 0,#1f1f22 12%,#18181a 85%,#2a2a2e 100%);
box-shadow:0 0 0 1px #000,0 5px 8px rgba(0,0,0,.7),inset 0 -7px 0 #0c0c0d}
body.solo.keys-black #kb .kb-black::before,body.solo.keys-black #kb .kb-black::after{display:none}
html body.solo.keys-black.keys-black #kb .kw.on,html body.solo.keys-black.keys-black #kb .kb-black.on{background:linear-gradient(180deg,color-mix(in srgb,var(--kl) 30%,#000) 0,color-mix(in srgb,var(--kl) 85%,#000) 30%,var(--kl) 70%,color-mix(in srgb,var(--kl) 60%,#fff) 100%)!important;
box-shadow:0 0 22px 3px color-mix(in srgb,var(--kl) 65%,transparent),0 18px 30px -6px color-mix(in srgb,var(--kl) 80%,transparent),inset 0 0 0 1px color-mix(in srgb,var(--kl) 60%,#fff),inset 0 -10px 16px rgba(255,255,255,.28)!important;z-index:1;color:var(--kl-ink)}
html body.solo.keys-black #kb .kb-black.on{z-index:4}
body.solo.keys-black #kb .kw .kn{color:#cfc6b4;background:rgba(255,255,255,.06);box-shadow:none;border:0}
/* Midnight, refined: the naturals are satin (a soft sheen pools toward the front, a faint edge light on one side), the sharps are a deeper
gloss black with a crisp edge highlight and a small reflection near the top. Straight view: each key ends on its own front, on a dark rail */
html body.solo.keys-black #kb .kw:not(.on):not(.ln-t):not(.heard):not(.sc-t):not(.sc-ok):not(.sc-no):not(.sg-t){background-image:radial-gradient(140% 38% at 50% 100%,rgba(255,255,255,.055),transparent 70%),linear-gradient(90deg,rgba(255,255,255,.028) 0,transparent 12%,transparent 86%,rgba(0,0,0,.28) 100%),linear-gradient(180deg,#060607 0,#141417 5%,#17171a 50%,#1c1c20 88%,#202024 100%)!important}
html body.solo.keys-black #kb .kb-black:not(.on):not(.ln-t):not(.heard):not(.sc-t):not(.sc-ok):not(.sc-no):not(.sg-t){background-image:linear-gradient(180deg,rgba(255,255,255,0) 5%,rgba(255,255,255,.065) 7%,rgba(255,255,255,0) 26%),linear-gradient(90deg,rgba(255,255,255,.14) 0,rgba(255,255,255,.035) 9%,transparent 24%,transparent 74%,rgba(255,255,255,.04) 90%,rgba(255,255,255,.1) 100%),linear-gradient(180deg,#1b1b1e 0,#0f0f11 16%,#0b0b0c 76%,#17171a 88%,#26262a 100%)!important}
html body.solo.keys-black:not(.kv-tilt):not(.kv-stage) #kb{box-shadow:0 1px 0 #000,0 6px 0 -1px #111113,0 7px 0 -1px #1f1f22,0 12px 14px -4px rgba(0,0,0,.7)}
html body.solo.keys-black:not(.kv-tilt):not(.kv-stage) #kb .kw:not(.on):not(.ln-t):not(.heard):not(.sc-t):not(.sc-ok):not(.sc-no):not(.sg-t)::before{content:"";position:absolute;bottom:0;left:1px;right:0;height:9px;pointer-events:none;z-index:0;border-radius:0 0 4px 4px;background:linear-gradient(180deg,rgba(255,255,255,0) 0,rgba(255,255,255,.1) 1.5px,#212125 3px,#17171a 60%,#0c0c0e 100%);box-shadow:0 1px 0 rgba(0,0,0,.6)}
body.solo.keys-black.kv-tilt .kb-scroll::before{background:radial-gradient(55% 70% at 50% 0,rgba(140,120,255,.10),transparent 75%)}
html body.solo.wt-on.keys-black #kb .kw:not(.on):not(.ln-t):not(.heard):not(.sc-t):not(.sc-ok):not(.sc-no):not(.sg-t)::before{background:linear-gradient(180deg,rgba(0,0,0,0) 0,rgba(255,255,255,.06) 3px,#1a1a1d 5px,#0d0d0f 100%)}
html body.solo.wt-on.keys-black #kb .kb-black:not(.on):not(.ln-t):not(.heard):not(.sc-t):not(.sc-ok):not(.sc-no):not(.sg-t){box-shadow:0 0 0 1px #000,inset 0 -18px 0 #101012,inset 0 -19px 0 #2a2a2e,0 5px 8px rgba(0,0,0,.7)!important}
/* Midnight + pedal light: the whole held key glows softly from inside (in the key light colour) and fades with the note, instead of only its front edge */
html body.solo.keys-black.sl-on #kb .kw.sus-glow:not(.on):not(.ln-t):not(.heard):not(.sc-t):not(.sc-ok):not(.sc-no):not(.sg-t){background:linear-gradient(180deg,#09090a 0,color-mix(in srgb,var(--kl) calc(var(--sg) * 38%),#141416) 45%,color-mix(in srgb,var(--kl) calc(var(--sg) * 62%),#121214) 100%)!important;box-shadow:inset 0 0 calc(var(--sg) * 18px) color-mix(in srgb,var(--kl) calc(var(--sg) * 55%),transparent),inset -1px 0 0 rgba(255,255,255,.035),inset 1px 0 0 rgba(0,0,0,.8)!important}
html body.solo.keys-black.sl-on #kb .kb-black.sus-glow:not(.on):not(.ln-t):not(.heard):not(.sc-t):not(.sc-ok):not(.sc-no):not(.sg-t){background:linear-gradient(180deg,#1f1f22 0,color-mix(in srgb,var(--kl) calc(var(--sg) * 45%),#1e1e21) 55%,color-mix(in srgb,var(--kl) calc(var(--sg) * 68%),#1a1a1d) 100%)!important;box-shadow:0 0 0 1px #000,0 5px 8px rgba(0,0,0,.7),inset 0 0 calc(var(--sg) * 14px) color-mix(in srgb,var(--kl) calc(var(--sg) * 55%),transparent)!important}
html body.solo.keys-black.sl-on #kb .kw.sus-glow:not(.on):not(.ln-t):not(.heard):not(.sc-t):not(.sc-ok):not(.sc-no):not(.sg-t)::before{background:linear-gradient(180deg,transparent 0,color-mix(in srgb,var(--kl) calc(var(--sg) * 62%),#121214) 100%)!important;opacity:1!important}
/* Midnight colours: the same keys as Midnight, in a deep colour (generated from the Midnight rules: every dark grey of the keys takes the colour, the light and its glow stay yours) */
body.solo.keys-black.kt-navy #kb{background:#04080f}
body.solo.keys-black.kt-navy #kb .kw{border:0;border-left:1px solid #020408;border-radius:0 0 5px 5px}
body.solo.keys-black.kt-navy #kb .kw:not(.on):not(.ln-t):not(.heard):not(.sc-t):not(.sc-ok):not(.sc-no):not(.sg-t){background-color:#0f1b35;
background-image:linear-gradient(0deg,color-mix(in srgb,var(--kl) 70%,transparent) 0,color-mix(in srgb,var(--kl) 70%,transparent) 2px,color-mix(in srgb,var(--kl) 14%,transparent) 2px,transparent 14px),linear-gradient(180deg,#090f1e 0,#142244 6%,#111d3a 60%,#0d172e 100%);
box-shadow:inset -1px 0 0 rgba(255,255,255,.035),inset 1px 0 0 rgba(0,0,0,.8),0 1px 0 #020408;color:#9a948a}
body.solo.keys-black.kt-navy #kb .kb-black{border:0;border-radius:0 0 4px 4px;overflow:hidden}
body.solo.keys-black.kt-navy #kb .kb-black:not(.on):not(.ln-t):not(.heard):not(.sc-t):not(.sc-ok):not(.sc-no):not(.sg-t){background-color:#182952;
background-image:linear-gradient(0deg,color-mix(in srgb,var(--kl) 75%,transparent) 0,color-mix(in srgb,var(--kl) 75%,transparent) 2px,transparent 2px),linear-gradient(90deg,rgba(255,255,255,.07) 0,transparent 18%,transparent 78%,rgba(255,255,255,.1) 100%),linear-gradient(180deg,#223b75 0,#192b55 12%,#142243 85%,#213870 100%);
box-shadow:0 0 0 1px #020408,0 5px 8px rgba(0,0,0,.7),inset 0 -7px 0 #0b1326}
body.solo.keys-black.kt-navy #kb .kb-black::before,body.solo.keys-black.kt-navy #kb .kb-black::after{display:none}
html body.solo.keys-black.kt-navy.keys-black.kt-navy #kb .kw.on,html body.solo.keys-black.kt-navy.keys-black.kt-navy #kb .kb-black.on{background:linear-gradient(180deg,color-mix(in srgb,var(--kl) 30%,#020408) 0,color-mix(in srgb,var(--kl) 85%,#020408) 30%,var(--kl) 70%,color-mix(in srgb,var(--kl) 60%,#fff) 100%)!important;
box-shadow:0 0 22px 3px color-mix(in srgb,var(--kl) 65%,transparent),0 18px 30px -6px color-mix(in srgb,var(--kl) 80%,transparent),inset 0 0 0 1px color-mix(in srgb,var(--kl) 60%,#fff),inset 0 -10px 16px rgba(255,255,255,.28)!important;z-index:1;color:var(--kl-ink)}
html body.solo.keys-black.kt-navy #kb .kb-black.on{z-index:4}
body.solo.keys-black.kt-navy #kb .kw .kn{color:#cfc6b4;background:rgba(255,255,255,.06);box-shadow:none;border:0}
html body.solo.keys-black.kt-navy #kb .kw:not(.on):not(.ln-t):not(.heard):not(.sc-t):not(.sc-ok):not(.sc-no):not(.sg-t){background-image:radial-gradient(140% 38% at 50% 100%,rgba(255,255,255,.055),transparent 70%),linear-gradient(90deg,rgba(255,255,255,.028) 0,transparent 12%,transparent 86%,rgba(0,0,0,.28) 100%),linear-gradient(180deg,#070c17 0,#111d3a 5%,#132142 50%,#17274e 88%,#1a2c58 100%)!important}
html body.solo.keys-black.kt-navy #kb .kb-black:not(.on):not(.ln-t):not(.heard):not(.sc-t):not(.sc-ok):not(.sc-no):not(.sg-t){background-image:linear-gradient(180deg,rgba(255,255,255,0) 5%,rgba(255,255,255,.065) 7%,rgba(255,255,255,0) 26%),linear-gradient(90deg,rgba(255,255,255,.14) 0,rgba(255,255,255,.035) 9%,transparent 24%,transparent 74%,rgba(255,255,255,.04) 90%,rgba(255,255,255,.1) 100%),linear-gradient(180deg,#16264b 0,#0d172e 16%,#0a1223 76%,#132142 88%,#1e3466 100%)!important}
html body.solo.keys-black.kt-navy:not(.kv-tilt):not(.kv-stage) #kb{box-shadow:0 1px 0 #020408,0 6px 0 -1px #0f1932,0 7px 0 -1px #192b55,0 12px 14px -4px rgba(0,0,0,.7)}
html body.solo.keys-black.kt-navy:not(.kv-tilt):not(.kv-stage) #kb .kw:not(.on):not(.ln-t):not(.heard):not(.sc-t):not(.sc-ok):not(.sc-no):not(.sg-t)::before{content:"";position:absolute;bottom:0;left:1px;right:0;height:9px;pointer-events:none;z-index:0;border-radius:0 0 4px 4px;background:linear-gradient(180deg,rgba(255,255,255,0) 0,rgba(255,255,255,.1) 1.5px,#1a2d5a 3px,#132142 60%,#0b1326 100%);box-shadow:0 1px 0 rgba(0,0,0,.6)}
body.solo.keys-black.kt-navy.kv-tilt .kb-scroll::before{background:radial-gradient(55% 70% at 50% 0,rgba(140,120,255,.10),transparent 75%)}
html body.solo.wt-on.keys-black.kt-navy #kb .kw:not(.on):not(.ln-t):not(.heard):not(.sc-t):not(.sc-ok):not(.sc-no):not(.sg-t)::before{background:linear-gradient(180deg,rgba(0,0,0,0) 0,rgba(255,255,255,.06) 3px,#152549 5px,#0c1529 100%)}
html body.solo.wt-on.keys-black.kt-navy #kb .kb-black:not(.on):not(.ln-t):not(.heard):not(.sc-t):not(.sc-ok):not(.sc-no):not(.sg-t){box-shadow:0 0 0 1px #020408,inset 0 -18px 0 #0e1830,inset 0 -19px 0 #213870,0 5px 8px rgba(0,0,0,.7)!important}
html body.solo.keys-black.kt-navy.sl-on #kb .kw.sus-glow:not(.on):not(.ln-t):not(.heard):not(.sc-t):not(.sc-ok):not(.sc-no):not(.sg-t){background:linear-gradient(180deg,#090f1e 0,color-mix(in srgb,var(--kl) calc(var(--sg) * 38%),#111d3a) 45%,color-mix(in srgb,var(--kl) calc(var(--sg) * 62%),#0f1b35) 100%)!important;box-shadow:inset 0 0 calc(var(--sg) * 18px) color-mix(in srgb,var(--kl) calc(var(--sg) * 55%),transparent),inset -1px 0 0 rgba(255,255,255,.035),inset 1px 0 0 rgba(0,0,0,.8)!important}
html body.solo.keys-black.kt-navy.sl-on #kb .kb-black.sus-glow:not(.on):not(.ln-t):not(.heard):not(.sc-t):not(.sc-ok):not(.sc-no):not(.sg-t){background:linear-gradient(180deg,#192b55 0,color-mix(in srgb,var(--kl) calc(var(--sg) * 45%),#182952) 55%,color-mix(in srgb,var(--kl) calc(var(--sg) * 68%),#152549) 100%)!important;box-shadow:0 0 0 1px #020408,0 5px 8px rgba(0,0,0,.7),inset 0 0 calc(var(--sg) * 14px) color-mix(in srgb,var(--kl) calc(var(--sg) * 55%),transparent)!important}
html body.solo.keys-black.kt-navy.sl-on #kb .kw.sus-glow:not(.on):not(.ln-t):not(.heard):not(.sc-t):not(.sc-ok):not(.sc-no):not(.sg-t)::before{background:linear-gradient(180deg,transparent 0,color-mix(in srgb,var(--kl) calc(var(--sg) * 62%),#0f1b35) 100%)!important;opacity:1!important}
body.solo:is(.kv-tilt,.kv-stage).keys-black.kt-navy #kb::after{--kgap:rgba(0,0,0,.9);--kgap2:rgba(0,0,0,.35)}
body.solo.keys-black.kt-emerald #kb{background:#050e0b}
body.solo.keys-black.kt-emerald #kb .kw{border:0;border-left:1px solid #030806;border-radius:0 0 5px 5px}
body.solo.keys-black.kt-emerald #kb .kw:not(.on):not(.ln-t):not(.heard):not(.sc-t):not(.sc-ok):not(.sc-no):not(.sg-t){background-color:#123226;
background-image:linear-gradient(0deg,color-mix(in srgb,var(--kl) 70%,transparent) 0,color-mix(in srgb,var(--kl) 70%,transparent) 2px,color-mix(in srgb,var(--kl) 14%,transparent) 2px,transparent 14px),linear-gradient(180deg,#0a1d16 0,#174131 6%,#13372a 60%,#0f2b21 100%);
box-shadow:inset -1px 0 0 rgba(255,255,255,.035),inset 1px 0 0 rgba(0,0,0,.8),0 1px 0 #030806;color:#9a948a}
body.solo.keys-black.kt-emerald #kb .kb-black{border:0;border-radius:0 0 4px 4px;overflow:hidden}
body.solo.keys-black.kt-emerald #kb .kb-black:not(.on):not(.ln-t):not(.heard):not(.sc-t):not(.sc-ok):not(.sc-no):not(.sg-t){background-color:#1c4f3c;
background-image:linear-gradient(0deg,color-mix(in srgb,var(--kl) 75%,transparent) 0,color-mix(in srgb,var(--kl) 75%,transparent) 2px,transparent 2px),linear-gradient(90deg,rgba(255,255,255,.07) 0,transparent 18%,transparent 78%,rgba(255,255,255,.1) 100%),linear-gradient(180deg,#277055 0,#1c513e 12%,#174031 85%,#266b52 100%);
box-shadow:0 0 0 1px #030806,0 5px 8px rgba(0,0,0,.7),inset 0 -7px 0 #0d241b}
body.solo.keys-black.kt-emerald #kb .kb-black::before,body.solo.keys-black.kt-emerald #kb .kb-black::after{display:none}
html body.solo.keys-black.kt-emerald.keys-black.kt-emerald #kb .kw.on,html body.solo.keys-black.kt-emerald.keys-black.kt-emerald #kb .kb-black.on{background:linear-gradient(180deg,color-mix(in srgb,var(--kl) 30%,#030806) 0,color-mix(in srgb,var(--kl) 85%,#030806) 30%,var(--kl) 70%,color-mix(in srgb,var(--kl) 60%,#fff) 100%)!important;
box-shadow:0 0 22px 3px color-mix(in srgb,var(--kl) 65%,transparent),0 18px 30px -6px color-mix(in srgb,var(--kl) 80%,transparent),inset 0 0 0 1px color-mix(in srgb,var(--kl) 60%,#fff),inset 0 -10px 16px rgba(255,255,255,.28)!important;z-index:1;color:var(--kl-ink)}
html body.solo.keys-black.kt-emerald #kb .kb-black.on{z-index:4}
body.solo.keys-black.kt-emerald #kb .kw .kn{color:#cfc6b4;background:rgba(255,255,255,.06);box-shadow:none;border:0}
html body.solo.keys-black.kt-emerald #kb .kw:not(.on):not(.ln-t):not(.heard):not(.sc-t):not(.sc-ok):not(.sc-no):not(.sg-t){background-image:radial-gradient(140% 38% at 50% 100%,rgba(255,255,255,.055),transparent 70%),linear-gradient(90deg,rgba(255,255,255,.028) 0,transparent 12%,transparent 86%,rgba(0,0,0,.28) 100%),linear-gradient(180deg,#081611 0,#14382a 5%,#163f30 50%,#1a4b39 88%,#1e5440 100%)!important}
html body.solo.keys-black.kt-emerald #kb .kb-black:not(.on):not(.ln-t):not(.heard):not(.sc-t):not(.sc-ok):not(.sc-no):not(.sg-t){background-image:linear-gradient(180deg,rgba(255,255,255,0) 5%,rgba(255,255,255,.065) 7%,rgba(255,255,255,0) 26%),linear-gradient(90deg,rgba(255,255,255,.14) 0,rgba(255,255,255,.035) 9%,transparent 24%,transparent 74%,rgba(255,255,255,.04) 90%,rgba(255,255,255,.1) 100%),linear-gradient(180deg,#194837 0,#0f2b21 16%,#0c221a 76%,#163f30 88%,#22624b 100%)!important}
html body.solo.keys-black.kt-emerald:not(.kv-tilt):not(.kv-stage) #kb{box-shadow:0 1px 0 #030806,0 6px 0 -1px #113025,0 7px 0 -1px #1c513e,0 12px 14px -4px rgba(0,0,0,.7)}
html body.solo.keys-black.kt-emerald:not(.kv-tilt):not(.kv-stage) #kb .kw:not(.on):not(.ln-t):not(.heard):not(.sc-t):not(.sc-ok):not(.sc-no):not(.sg-t)::before{content:"";position:absolute;bottom:0;left:1px;right:0;height:9px;pointer-events:none;z-index:0;border-radius:0 0 4px 4px;background:linear-gradient(180deg,rgba(255,255,255,0) 0,rgba(255,255,255,.1) 1.5px,#1e5642 3px,#163f30 60%,#0d251c 100%);box-shadow:0 1px 0 rgba(0,0,0,.6)}
body.solo.keys-black.kt-emerald.kv-tilt .kb-scroll::before{background:radial-gradient(55% 70% at 50% 0,rgba(140,120,255,.10),transparent 75%)}
html body.solo.wt-on.keys-black.kt-emerald #kb .kw:not(.on):not(.ln-t):not(.heard):not(.sc-t):not(.sc-ok):not(.sc-no):not(.sg-t)::before{background:linear-gradient(180deg,rgba(0,0,0,0) 0,rgba(255,255,255,.06) 3px,#184535 5px,#0e271e 100%)}
html body.solo.wt-on.keys-black.kt-emerald #kb .kb-black:not(.on):not(.ln-t):not(.heard):not(.sc-t):not(.sc-ok):not(.sc-no):not(.sg-t){box-shadow:0 0 0 1px #030806,inset 0 -18px 0 #102e23,inset 0 -19px 0 #266b52,0 5px 8px rgba(0,0,0,.7)!important}
html body.solo.keys-black.kt-emerald.sl-on #kb .kw.sus-glow:not(.on):not(.ln-t):not(.heard):not(.sc-t):not(.sc-ok):not(.sc-no):not(.sg-t){background:linear-gradient(180deg,#0a1d16 0,color-mix(in srgb,var(--kl) calc(var(--sg) * 38%),#13372a) 45%,color-mix(in srgb,var(--kl) calc(var(--sg) * 62%),#123226) 100%)!important;box-shadow:inset 0 0 calc(var(--sg) * 18px) color-mix(in srgb,var(--kl) calc(var(--sg) * 55%),transparent),inset -1px 0 0 rgba(255,255,255,.035),inset 1px 0 0 rgba(0,0,0,.8)!important}
html body.solo.keys-black.kt-emerald.sl-on #kb .kb-black.sus-glow:not(.on):not(.ln-t):not(.heard):not(.sc-t):not(.sc-ok):not(.sc-no):not(.sg-t){background:linear-gradient(180deg,#1c513e 0,color-mix(in srgb,var(--kl) calc(var(--sg) * 45%),#1c4f3c) 55%,color-mix(in srgb,var(--kl) calc(var(--sg) * 68%),#184535) 100%)!important;box-shadow:0 0 0 1px #030806,0 5px 8px rgba(0,0,0,.7),inset 0 0 calc(var(--sg) * 14px) color-mix(in srgb,var(--kl) calc(var(--sg) * 55%),transparent)!important}
html body.solo.keys-black.kt-emerald.sl-on #kb .kw.sus-glow:not(.on):not(.ln-t):not(.heard):not(.sc-t):not(.sc-ok):not(.sc-no):not(.sg-t)::before{background:linear-gradient(180deg,transparent 0,color-mix(in srgb,var(--kl) calc(var(--sg) * 62%),#123226) 100%)!important;opacity:1!important}
body.solo:is(.kv-tilt,.kv-stage).keys-black.kt-emerald #kb::after{--kgap:rgba(0,0,0,.9);--kgap2:rgba(0,0,0,.35)}
body.solo.keys-black.kt-wine #kb{background:#0f0507}
body.solo.keys-black.kt-wine #kb .kw{border:0;border-left:1px solid #080304;border-radius:0 0 5px 5px}
body.solo.keys-black.kt-wine #kb .kw:not(.on):not(.ln-t):not(.heard):not(.sc-t):not(.sc-ok):not(.sc-no):not(.sg-t){background-color:#331119;
background-image:linear-gradient(0deg,color-mix(in srgb,var(--kl) 70%,transparent) 0,color-mix(in srgb,var(--kl) 70%,transparent) 2px,color-mix(in srgb,var(--kl) 14%,transparent) 2px,transparent 14px),linear-gradient(180deg,#1d0a0e 0,#421620 6%,#38131b 60%,#2c0f16 100%);
box-shadow:inset -1px 0 0 rgba(255,255,255,.035),inset 1px 0 0 rgba(0,0,0,.8),0 1px 0 #080304;color:#9a948a}
body.solo.keys-black.kt-wine #kb .kb-black{border:0;border-radius:0 0 4px 4px;overflow:hidden}
body.solo.keys-black.kt-wine #kb .kb-black:not(.on):not(.ln-t):not(.heard):not(.sc-t):not(.sc-ok):not(.sc-no):not(.sg-t){background-color:#501b27;
background-image:linear-gradient(0deg,color-mix(in srgb,var(--kl) 75%,transparent) 0,color-mix(in srgb,var(--kl) 75%,transparent) 2px,transparent 2px),linear-gradient(90deg,rgba(255,255,255,.07) 0,transparent 18%,transparent 78%,rgba(255,255,255,.1) 100%),linear-gradient(180deg,#712637 0,#521b28 12%,#411620 85%,#6c2435 100%);
box-shadow:0 0 0 1px #080304,0 5px 8px rgba(0,0,0,.7),inset 0 -7px 0 #240c12}
body.solo.keys-black.kt-wine #kb .kb-black::before,body.solo.keys-black.kt-wine #kb .kb-black::after{display:none}
html body.solo.keys-black.kt-wine.keys-black.kt-wine #kb .kw.on,html body.solo.keys-black.kt-wine.keys-black.kt-wine #kb .kb-black.on{background:linear-gradient(180deg,color-mix(in srgb,var(--kl) 30%,#080304) 0,color-mix(in srgb,var(--kl) 85%,#080304) 30%,var(--kl) 70%,color-mix(in srgb,var(--kl) 60%,#fff) 100%)!important;
box-shadow:0 0 22px 3px color-mix(in srgb,var(--kl) 65%,transparent),0 18px 30px -6px color-mix(in srgb,var(--kl) 80%,transparent),inset 0 0 0 1px color-mix(in srgb,var(--kl) 60%,#fff),inset 0 -10px 16px rgba(255,255,255,.28)!important;z-index:1;color:var(--kl-ink)}
html body.solo.keys-black.kt-wine #kb .kb-black.on{z-index:4}
body.solo.keys-black.kt-wine #kb .kw .kn{color:#cfc6b4;background:rgba(255,255,255,.06);box-shadow:none;border:0}
html body.solo.keys-black.kt-wine #kb .kw:not(.on):not(.ln-t):not(.heard):not(.sc-t):not(.sc-ok):not(.sc-no):not(.sg-t){background-image:radial-gradient(140% 38% at 50% 100%,rgba(255,255,255,.055),transparent 70%),linear-gradient(90deg,rgba(255,255,255,.028) 0,transparent 12%,transparent 86%,rgba(0,0,0,.28) 100%),linear-gradient(180deg,#16070b 0,#38131c 5%,#3f151f 50%,#4c1925 88%,#551c2a 100%)!important}
html body.solo.keys-black.kt-wine #kb .kb-black:not(.on):not(.ln-t):not(.heard):not(.sc-t):not(.sc-ok):not(.sc-no):not(.sg-t){background-image:linear-gradient(180deg,rgba(255,255,255,0) 5%,rgba(255,255,255,.065) 7%,rgba(255,255,255,0) 26%),linear-gradient(90deg,rgba(255,255,255,.14) 0,rgba(255,255,255,.035) 9%,transparent 24%,transparent 74%,rgba(255,255,255,.04) 90%,rgba(255,255,255,.1) 100%),linear-gradient(180deg,#491824 0,#2c0f16 16%,#220b11 76%,#3f151f 88%,#632130 100%)!important}
html body.solo.keys-black.kt-wine:not(.kv-tilt):not(.kv-stage) #kb{box-shadow:0 1px 0 #080304,0 6px 0 -1px #311018,0 7px 0 -1px #521b28,0 12px 14px -4px rgba(0,0,0,.7)}
html body.solo.keys-black.kt-wine:not(.kv-tilt):not(.kv-stage) #kb .kw:not(.on):not(.ln-t):not(.heard):not(.sc-t):not(.sc-ok):not(.sc-no):not(.sg-t)::before{content:"";position:absolute;bottom:0;left:1px;right:0;height:9px;pointer-events:none;z-index:0;border-radius:0 0 4px 4px;background:linear-gradient(180deg,rgba(255,255,255,0) 0,rgba(255,255,255,.1) 1.5px,#571d2b 3px,#3f151f 60%,#250c12 100%);box-shadow:0 1px 0 rgba(0,0,0,.6)}
body.solo.keys-black.kt-wine.kv-tilt .kb-scroll::before{background:radial-gradient(55% 70% at 50% 0,rgba(140,120,255,.10),transparent 75%)}
html body.solo.wt-on.keys-black.kt-wine #kb .kw:not(.on):not(.ln-t):not(.heard):not(.sc-t):not(.sc-ok):not(.sc-no):not(.sg-t)::before{background:linear-gradient(180deg,rgba(0,0,0,0) 0,rgba(255,255,255,.06) 3px,#461722 5px,#270d13 100%)}
html body.solo.wt-on.keys-black.kt-wine #kb .kb-black:not(.on):not(.ln-t):not(.heard):not(.sc-t):not(.sc-ok):not(.sc-no):not(.sg-t){box-shadow:0 0 0 1px #080304,inset 0 -18px 0 #2e0f17,inset 0 -19px 0 #6c2435,0 5px 8px rgba(0,0,0,.7)!important}
html body.solo.keys-black.kt-wine.sl-on #kb .kw.sus-glow:not(.on):not(.ln-t):not(.heard):not(.sc-t):not(.sc-ok):not(.sc-no):not(.sg-t){background:linear-gradient(180deg,#1d0a0e 0,color-mix(in srgb,var(--kl) calc(var(--sg) * 38%),#38131b) 45%,color-mix(in srgb,var(--kl) calc(var(--sg) * 62%),#331119) 100%)!important;box-shadow:inset 0 0 calc(var(--sg) * 18px) color-mix(in srgb,var(--kl) calc(var(--sg) * 55%),transparent),inset -1px 0 0 rgba(255,255,255,.035),inset 1px 0 0 rgba(0,0,0,.8)!important}
html body.solo.keys-black.kt-wine.sl-on #kb .kb-black.sus-glow:not(.on):not(.ln-t):not(.heard):not(.sc-t):not(.sc-ok):not(.sc-no):not(.sg-t){background:linear-gradient(180deg,#521b28 0,color-mix(in srgb,var(--kl) calc(var(--sg) * 45%),#501b27) 55%,color-mix(in srgb,var(--kl) calc(var(--sg) * 68%),#461722) 100%)!important;box-shadow:0 0 0 1px #080304,0 5px 8px rgba(0,0,0,.7),inset 0 0 calc(var(--sg) * 14px) color-mix(in srgb,var(--kl) calc(var(--sg) * 55%),transparent)!important}
html body.solo.keys-black.kt-wine.sl-on #kb .kw.sus-glow:not(.on):not(.ln-t):not(.heard):not(.sc-t):not(.sc-ok):not(.sc-no):not(.sg-t)::before{background:linear-gradient(180deg,transparent 0,color-mix(in srgb,var(--kl) calc(var(--sg) * 62%),#331119) 100%)!important;opacity:1!important}
body.solo:is(.kv-tilt,.kv-stage).keys-black.kt-wine #kb::after{--kgap:rgba(0,0,0,.9);--kgap2:rgba(0,0,0,.35)}
body.solo.keys-black.kt-plum #kb{background:#0b060d}
body.solo.keys-black.kt-plum #kb .kw{border:0;border-left:1px solid #060307;border-radius:0 0 5px 5px}
body.solo.keys-black.kt-plum #kb .kw:not(.on):not(.ln-t):not(.heard):not(.sc-t):not(.sc-ok):not(.sc-no):not(.sg-t){background-color:#27152f;
background-image:linear-gradient(0deg,color-mix(in srgb,var(--kl) 70%,transparent) 0,color-mix(in srgb,var(--kl) 70%,transparent) 2px,color-mix(in srgb,var(--kl) 14%,transparent) 2px,transparent 14px),linear-gradient(180deg,#170c1b 0,#331b3d 6%,#2b1733 60%,#221229 100%);
box-shadow:inset -1px 0 0 rgba(255,255,255,.035),inset 1px 0 0 rgba(0,0,0,.8),0 1px 0 #060307;color:#9a948a}
body.solo.keys-black.kt-plum #kb .kb-black{border:0;border-radius:0 0 4px 4px;overflow:hidden}
body.solo.keys-black.kt-plum #kb .kb-black:not(.on):not(.ln-t):not(.heard):not(.sc-t):not(.sc-ok):not(.sc-no):not(.sg-t){background-color:#3d2149;
background-image:linear-gradient(0deg,color-mix(in srgb,var(--kl) 75%,transparent) 0,color-mix(in srgb,var(--kl) 75%,transparent) 2px,transparent 2px),linear-gradient(90deg,rgba(255,255,255,.07) 0,transparent 18%,transparent 78%,rgba(255,255,255,.1) 100%),linear-gradient(180deg,#572f68 0,#3f224b 12%,#321b3c 85%,#532d64 100%);
box-shadow:0 0 0 1px #060307,0 5px 8px rgba(0,0,0,.7),inset 0 -7px 0 #1c0f21}
body.solo.keys-black.kt-plum #kb .kb-black::before,body.solo.keys-black.kt-plum #kb .kb-black::after{display:none}
html body.solo.keys-black.kt-plum.keys-black.kt-plum #kb .kw.on,html body.solo.keys-black.kt-plum.keys-black.kt-plum #kb .kb-black.on{background:linear-gradient(180deg,color-mix(in srgb,var(--kl) 30%,#060307) 0,color-mix(in srgb,var(--kl) 85%,#060307) 30%,var(--kl) 70%,color-mix(in srgb,var(--kl) 60%,#fff) 100%)!important;
box-shadow:0 0 22px 3px color-mix(in srgb,var(--kl) 65%,transparent),0 18px 30px -6px color-mix(in srgb,var(--kl) 80%,transparent),inset 0 0 0 1px color-mix(in srgb,var(--kl) 60%,#fff),inset 0 -10px 16px rgba(255,255,255,.28)!important;z-index:1;color:var(--kl-ink)}
html body.solo.keys-black.kt-plum #kb .kb-black.on{z-index:4}
body.solo.keys-black.kt-plum #kb .kw .kn{color:#cfc6b4;background:rgba(255,255,255,.06);box-shadow:none;border:0}
html body.solo.keys-black.kt-plum #kb .kw:not(.on):not(.ln-t):not(.heard):not(.sc-t):not(.sc-ok):not(.sc-no):not(.sg-t){background-image:radial-gradient(140% 38% at 50% 100%,rgba(255,255,255,.055),transparent 70%),linear-gradient(90deg,rgba(255,255,255,.028) 0,transparent 12%,transparent 86%,rgba(0,0,0,.28) 100%),linear-gradient(180deg,#110915 0,#2b1734 5%,#311a3a 50%,#3a1f46 88%,#41234e 100%)!important}
html body.solo.keys-black.kt-plum #kb .kb-black:not(.on):not(.ln-t):not(.heard):not(.sc-t):not(.sc-ok):not(.sc-no):not(.sg-t){background-image:linear-gradient(180deg,rgba(255,255,255,0) 5%,rgba(255,255,255,.065) 7%,rgba(255,255,255,0) 26%),linear-gradient(90deg,rgba(255,255,255,.14) 0,rgba(255,255,255,.035) 9%,transparent 24%,transparent 74%,rgba(255,255,255,.04) 90%,rgba(255,255,255,.1) 100%),linear-gradient(180deg,#381e43 0,#221229 16%,#1a0e1f 76%,#311a3a 88%,#4c295b 100%)!important}
html body.solo.keys-black.kt-plum:not(.kv-tilt):not(.kv-stage) #kb{box-shadow:0 1px 0 #060307,0 6px 0 -1px #25142d,0 7px 0 -1px #3f224b,0 12px 14px -4px rgba(0,0,0,.7)}
html body.solo.keys-black.kt-plum:not(.kv-tilt):not(.kv-stage) #kb .kw:not(.on):not(.ln-t):not(.heard):not(.sc-t):not(.sc-ok):not(.sc-no):not(.sg-t)::before{content:"";position:absolute;bottom:0;left:1px;right:0;height:9px;pointer-events:none;z-index:0;border-radius:0 0 4px 4px;background:linear-gradient(180deg,rgba(255,255,255,0) 0,rgba(255,255,255,.1) 1.5px,#432450 3px,#311a3a 60%,#1c0f22 100%);box-shadow:0 1px 0 rgba(0,0,0,.6)}
body.solo.keys-black.kt-plum.kv-tilt .kb-scroll::before{background:radial-gradient(55% 70% at 50% 0,rgba(140,120,255,.10),transparent 75%)}
html body.solo.wt-on.keys-black.kt-plum #kb .kw:not(.on):not(.ln-t):not(.heard):not(.sc-t):not(.sc-ok):not(.sc-no):not(.sg-t)::before{background:linear-gradient(180deg,rgba(0,0,0,0) 0,rgba(255,255,255,.06) 3px,#361d41 5px,#1e1024 100%)}
html body.solo.wt-on.keys-black.kt-plum #kb .kb-black:not(.on):not(.ln-t):not(.heard):not(.sc-t):not(.sc-ok):not(.sc-no):not(.sg-t){box-shadow:0 0 0 1px #060307,inset 0 -18px 0 #24132b,inset 0 -19px 0 #532d64,0 5px 8px rgba(0,0,0,.7)!important}
html body.solo.keys-black.kt-plum.sl-on #kb .kw.sus-glow:not(.on):not(.ln-t):not(.heard):not(.sc-t):not(.sc-ok):not(.sc-no):not(.sg-t){background:linear-gradient(180deg,#170c1b 0,color-mix(in srgb,var(--kl) calc(var(--sg) * 38%),#2b1733) 45%,color-mix(in srgb,var(--kl) calc(var(--sg) * 62%),#27152f) 100%)!important;box-shadow:inset 0 0 calc(var(--sg) * 18px) color-mix(in srgb,var(--kl) calc(var(--sg) * 55%),transparent),inset -1px 0 0 rgba(255,255,255,.035),inset 1px 0 0 rgba(0,0,0,.8)!important}
html body.solo.keys-black.kt-plum.sl-on #kb .kb-black.sus-glow:not(.on):not(.ln-t):not(.heard):not(.sc-t):not(.sc-ok):not(.sc-no):not(.sg-t){background:linear-gradient(180deg,#3f224b 0,color-mix(in srgb,var(--kl) calc(var(--sg) * 45%),#3d2149) 55%,color-mix(in srgb,var(--kl) calc(var(--sg) * 68%),#361d41) 100%)!important;box-shadow:0 0 0 1px #060307,0 5px 8px rgba(0,0,0,.7),inset 0 0 calc(var(--sg) * 14px) color-mix(in srgb,var(--kl) calc(var(--sg) * 55%),transparent)!important}
html body.solo.keys-black.kt-plum.sl-on #kb .kw.sus-glow:not(.on):not(.ln-t):not(.heard):not(.sc-t):not(.sc-ok):not(.sc-no):not(.sg-t)::before{background:linear-gradient(180deg,transparent 0,color-mix(in srgb,var(--kl) calc(var(--sg) * 62%),#27152f) 100%)!important;opacity:1!important}
body.solo:is(.kv-tilt,.kv-stage).keys-black.kt-plum #kb::after{--kgap:rgba(0,0,0,.9);--kgap2:rgba(0,0,0,.35)}
body.solo.keys-black.kt-cocoa #kb{background:#0e0906}
body.solo.keys-black.kt-cocoa #kb .kw{border:0;border-left:1px solid #070503;border-radius:0 0 5px 5px}
body.solo.keys-black.kt-cocoa #kb .kw:not(.on):not(.ln-t):not(.heard):not(.sc-t):not(.sc-ok):not(.sc-no):not(.sg-t){background-color:#301f14;
background-image:linear-gradient(0deg,color-mix(in srgb,var(--kl) 70%,transparent) 0,color-mix(in srgb,var(--kl) 70%,transparent) 2px,color-mix(in srgb,var(--kl) 14%,transparent) 2px,transparent 14px),linear-gradient(180deg,#1c120b 0,#3e2819 6%,#352216 60%,#2a1b11 100%);
box-shadow:inset -1px 0 0 rgba(255,255,255,.035),inset 1px 0 0 rgba(0,0,0,.8),0 1px 0 #070503;color:#9a948a}
body.solo.keys-black.kt-cocoa #kb .kb-black{border:0;border-radius:0 0 4px 4px;overflow:hidden}
body.solo.keys-black.kt-cocoa #kb .kb-black:not(.on):not(.ln-t):not(.heard):not(.sc-t):not(.sc-ok):not(.sc-no):not(.sg-t){background-color:#4b311f;
background-image:linear-gradient(0deg,color-mix(in srgb,var(--kl) 75%,transparent) 0,color-mix(in srgb,var(--kl) 75%,transparent) 2px,transparent 2px),linear-gradient(90deg,rgba(255,255,255,.07) 0,transparent 18%,transparent 78%,rgba(255,255,255,.1) 100%),linear-gradient(180deg,#6b452c 0,#4e3220 12%,#3e2819 85%,#67422a 100%);
box-shadow:0 0 0 1px #070503,0 5px 8px rgba(0,0,0,.7),inset 0 -7px 0 #22160e}
body.solo.keys-black.kt-cocoa #kb .kb-black::before,body.solo.keys-black.kt-cocoa #kb .kb-black::after{display:none}
html body.solo.keys-black.kt-cocoa.keys-black.kt-cocoa #kb .kw.on,html body.solo.keys-black.kt-cocoa.keys-black.kt-cocoa #kb .kb-black.on{background:linear-gradient(180deg,color-mix(in srgb,var(--kl) 30%,#070503) 0,color-mix(in srgb,var(--kl) 85%,#070503) 30%,var(--kl) 70%,color-mix(in srgb,var(--kl) 60%,#fff) 100%)!important;
box-shadow:0 0 22px 3px color-mix(in srgb,var(--kl) 65%,transparent),0 18px 30px -6px color-mix(in srgb,var(--kl) 80%,transparent),inset 0 0 0 1px color-mix(in srgb,var(--kl) 60%,#fff),inset 0 -10px 16px rgba(255,255,255,.28)!important;z-index:1;color:var(--kl-ink)}
html body.solo.keys-black.kt-cocoa #kb .kb-black.on{z-index:4}
body.solo.keys-black.kt-cocoa #kb .kw .kn{color:#cfc6b4;background:rgba(255,255,255,.06);box-shadow:none;border:0}
html body.solo.keys-black.kt-cocoa #kb .kw:not(.on):not(.ln-t):not(.heard):not(.sc-t):not(.sc-ok):not(.sc-no):not(.sg-t){background-image:radial-gradient(140% 38% at 50% 100%,rgba(255,255,255,.055),transparent 70%),linear-gradient(90deg,rgba(255,255,255,.028) 0,transparent 12%,transparent 86%,rgba(0,0,0,.28) 100%),linear-gradient(180deg,#150e09 0,#352216 5%,#3c2719 50%,#482e1d 88%,#513421 100%)!important}
html body.solo.keys-black.kt-cocoa #kb .kb-black:not(.on):not(.ln-t):not(.heard):not(.sc-t):not(.sc-ok):not(.sc-no):not(.sg-t){background-image:linear-gradient(180deg,rgba(255,255,255,0) 5%,rgba(255,255,255,.065) 7%,rgba(255,255,255,0) 26%),linear-gradient(90deg,rgba(255,255,255,.14) 0,rgba(255,255,255,.035) 9%,transparent 24%,transparent 74%,rgba(255,255,255,.04) 90%,rgba(255,255,255,.1) 100%),linear-gradient(180deg,#452c1c 0,#2a1b11 16%,#20150d 76%,#3c2719 88%,#5e3d26 100%)!important}
html body.solo.keys-black.kt-cocoa:not(.kv-tilt):not(.kv-stage) #kb{box-shadow:0 1px 0 #070503,0 6px 0 -1px #2e1e13,0 7px 0 -1px #4e3220,0 12px 14px -4px rgba(0,0,0,.7)}
html body.solo.keys-black.kt-cocoa:not(.kv-tilt):not(.kv-stage) #kb .kw:not(.on):not(.ln-t):not(.heard):not(.sc-t):not(.sc-ok):not(.sc-no):not(.sg-t)::before{content:"";position:absolute;bottom:0;left:1px;right:0;height:9px;pointer-events:none;z-index:0;border-radius:0 0 4px 4px;background:linear-gradient(180deg,rgba(255,255,255,0) 0,rgba(255,255,255,.1) 1.5px,#533522 3px,#3c2719 60%,#23170e 100%);box-shadow:0 1px 0 rgba(0,0,0,.6)}
body.solo.keys-black.kt-cocoa.kv-tilt .kb-scroll::before{background:radial-gradient(55% 70% at 50% 0,rgba(140,120,255,.10),transparent 75%)}
html body.solo.wt-on.keys-black.kt-cocoa #kb .kw:not(.on):not(.ln-t):not(.heard):not(.sc-t):not(.sc-ok):not(.sc-no):not(.sg-t)::before{background:linear-gradient(180deg,rgba(0,0,0,0) 0,rgba(255,255,255,.06) 3px,#432b1b 5px,#25180f 100%)}
html body.solo.wt-on.keys-black.kt-cocoa #kb .kb-black:not(.on):not(.ln-t):not(.heard):not(.sc-t):not(.sc-ok):not(.sc-no):not(.sg-t){box-shadow:0 0 0 1px #070503,inset 0 -18px 0 #2c1c12,inset 0 -19px 0 #67422a,0 5px 8px rgba(0,0,0,.7)!important}
html body.solo.keys-black.kt-cocoa.sl-on #kb .kw.sus-glow:not(.on):not(.ln-t):not(.heard):not(.sc-t):not(.sc-ok):not(.sc-no):not(.sg-t){background:linear-gradient(180deg,#1c120b 0,color-mix(in srgb,var(--kl) calc(var(--sg) * 38%),#352216) 45%,color-mix(in srgb,var(--kl) calc(var(--sg) * 62%),#301f14) 100%)!important;box-shadow:inset 0 0 calc(var(--sg) * 18px) color-mix(in srgb,var(--kl) calc(var(--sg) * 55%),transparent),inset -1px 0 0 rgba(255,255,255,.035),inset 1px 0 0 rgba(0,0,0,.8)!important}
html body.solo.keys-black.kt-cocoa.sl-on #kb .kb-black.sus-glow:not(.on):not(.ln-t):not(.heard):not(.sc-t):not(.sc-ok):not(.sc-no):not(.sg-t){background:linear-gradient(180deg,#4e3220 0,color-mix(in srgb,var(--kl) calc(var(--sg) * 45%),#4b311f) 55%,color-mix(in srgb,var(--kl) calc(var(--sg) * 68%),#432b1b) 100%)!important;box-shadow:0 0 0 1px #070503,0 5px 8px rgba(0,0,0,.7),inset 0 0 calc(var(--sg) * 14px) color-mix(in srgb,var(--kl) calc(var(--sg) * 55%),transparent)!important}
html body.solo.keys-black.kt-cocoa.sl-on #kb .kw.sus-glow:not(.on):not(.ln-t):not(.heard):not(.sc-t):not(.sc-ok):not(.sc-no):not(.sg-t)::before{background:linear-gradient(180deg,transparent 0,color-mix(in srgb,var(--kl) calc(var(--sg) * 62%),#301f14) 100%)!important;opacity:1!important}
body.solo:is(.kv-tilt,.kv-stage).keys-black.kt-cocoa #kb::after{--kgap:rgba(0,0,0,.9);--kgap2:rgba(0,0,0,.35)}
/* Pearl */
body.solo.keys-white #kb{background:#cfcac0}
body.solo.keys-white #kb .kw{border:0;border-left:1px solid #d6d1c6;border-radius:0 0 5px 5px}
body.solo.keys-white #kb .kw:not(.on):not(.ln-t):not(.heard):not(.sc-t):not(.sc-ok):not(.sc-no):not(.sg-t){background-color:#fbfaf7;
background-image:linear-gradient(0deg,color-mix(in srgb,var(--kl) 65%,transparent) 0,color-mix(in srgb,var(--kl) 65%,transparent) 2px,transparent 2px),linear-gradient(180deg,#dcd8cf 0,#f4f2ed 4%,#fefdfb 50%,#f6f3ee 100%);
box-shadow:inset -1px 0 0 #fff,inset 0 -3px 0 #ebe7df,0 1px 0 #b9b3a7}
body.solo.keys-white #kb .kb-black{border:0;border-radius:0 0 4px 4px;overflow:hidden}
body.solo.keys-white #kb .kb-black:not(.on):not(.ln-t):not(.heard):not(.sc-t):not(.sc-ok):not(.sc-no):not(.sg-t){background-color:#f2efe9;
background-image:linear-gradient(0deg,color-mix(in srgb,var(--kl) 70%,transparent) 0,color-mix(in srgb,var(--kl) 70%,transparent) 2px,transparent 2px),linear-gradient(90deg,rgba(0,0,0,.08) 0,transparent 16%,transparent 80%,rgba(0,0,0,.12) 100%),linear-gradient(180deg,#e3dfd7 0,#fbfaf6 14%,#efece5 86%,#d9d4ca 100%);
box-shadow:0 0 0 1px #bdb6a8,0 6px 9px rgba(60,50,30,.32),inset 0 -7px 0 #ddd8ce}
body.solo.keys-white #kb .kb-black::before,body.solo.keys-white #kb .kb-black::after{display:none}
html body.solo.keys-white.keys-white #kb .kw.on,html body.solo.keys-white.keys-white #kb .kb-black.on{background:linear-gradient(180deg,color-mix(in srgb,var(--kl) 45%,#fff) 0,var(--kl) 55%,color-mix(in srgb,var(--kl) 80%,#000) 100%)!important;
box-shadow:0 0 20px 2px color-mix(in srgb,var(--kl) 55%,transparent),0 16px 26px -6px color-mix(in srgb,var(--kl) 70%,transparent),inset 0 0 0 1px color-mix(in srgb,var(--kl) 60%,#000)!important;z-index:1;color:var(--kl-ink)}
html body.solo.keys-white #kb .kb-black.on{z-index:4}
body.solo.keys-white #kb .kb-black .kn,body.solo.keys-white #kb .kb-black .kkey{color:#5a5348}
/* ---- Nature (switch: ambience) ---- */
.amb-btn{display:none}
html:not(.ffo-ambience:where(:not(.fft-ambience))) body.solo .kb-switches .amb-btn{order:197;position:relative;display:inline-grid;place-items:center;width:36px;height:28px;border-radius:999px;border:1px solid #3a3630;background:#1d1b18;color:#cfc6b4;cursor:pointer;margin-left:auto;padding:0}
html:not(.ffo-ambience:where(:not(.fft-ambience))) body.solo .kb-switches #avAmb~#avBm,html:not(.ffo-ambience:where(:not(.fft-ambience))) body.solo .kb-switches #avAmb~#avCam,html:not(.ffo-ambience:where(:not(.fft-ambience))) body.solo .kb-switches #avAmb~#avMic,html:not(.ffo-ambience:where(:not(.fft-ambience))) body.solo .kb-switches #avAmb~#midiBtn{margin-left:0!important}
.amb-btn:hover,.amb-btn.open{color:var(--kl,#F6A801);border-color:color-mix(in srgb,var(--kl,#F6A801) 50%,#3a3630)}
.amb-btn .amb-dot{display:none;position:absolute;top:3px;right:5px;width:6px;height:6px;border-radius:50%;background:var(--kl,#F6A801);box-shadow:0 0 6px var(--kl,#F6A801)}
.amb-btn.live .amb-dot{display:block;animation:ambPulse 2.4s ease-in-out infinite}
@keyframes ambPulse{50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.amb-btn.live .amb-dot{animation:none}}
.amb-card .av-body{gap:12px}
/* the top row: Sustain keeps its word; the Vision button lives in your account; Learn, Song, Demo and the rest stay grey until they are on */
html:not(.ffo-tbicons:where(:not(.fft-tbicons))) body.rg .kb-switches #susInd.hx{padding-left:12px!important;padding-right:14px!important}
html:not(.ffo-tbicons:where(:not(.fft-tbicons))) body.rg .kb-switches #susInd.hx .hx-lab{max-width:none!important;opacity:1!important;margin-left:6px!important;overflow:visible!important}
html body.solo .kb-switches #avVision{display:none!important}
html body.solo .kb-switches :is(#lnTg,#sgTg,#libBtn,#rgKeys,#rgStudio,#avCam,#avMic):not([aria-expanded="true"]):not([aria-pressed="true"]):not(.on):not(.live):not(.open){color:#a89f8c!important}
html body.solo .kb-switches :is(#lnTg,#sgTg,#libBtn,#rgKeys,#rgStudio,#avCam,#avMic):not([aria-expanded="true"]):not([aria-pressed="true"]):not(.on):not(.live):not(.open) :is(svg,.sw-ic){color:#a89f8c!important}
/* ---- Layouts (switch: layouts) ---- */
html.ffo-layouts:where(:not(.fft-layouts)) #layBtn,html.ffo-layouts:where(:not(.fft-layouts)) .lay-card,html.ffo-layouts:where(:not(.fft-layouts)) .tv-dock{display:none!important}
.lay-btn{width:auto!important;flex:0 0 auto!important;padding:0 14px 0 11px!important;gap:7px;border-radius:23px!important;font:700 14px/1 var(--body)}
.lay-btn svg{width:19px;height:19px}
.lay-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.lay-t{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;padding:12px;border-radius:14px;border:1px solid #3a3630;background:#1f1c18;color:var(--cream,#FBF6EC);cursor:pointer;font:inherit}
.lay-t:hover{border-color:#5a5246}.lay-t[aria-checked="true"]{border-color:var(--kl,#F6A801);background:#2a241a}
.lay-i{width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:#34302a;color:var(--kl,#F6A801);margin-bottom:4px}
.lay-t[aria-checked="true"] .lay-i{background:var(--kl,#F6A801);color:#111}
.lay-t b{font:700 16px/1.1 'Fredoka',var(--body)}.lay-t small{font:600 12px/1.35 var(--body);color:#a89f8c}
.lay-dock{display:none;align-items:center;gap:6px;margin-top:4px;padding:4px;border-radius:999px;background:#1b1916;border:1px solid #2e2b26}
.lay-card.lay-t-on .lay-dock{display:flex}
.lay-dock span{font:800 11px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:#a89f8c;padding:0 8px}
.lay-dock button{flex:1;border:0;border-radius:999px;padding:8px 10px;background:transparent;color:var(--cream,#FBF6EC);font:700 13px/1 var(--body);cursor:pointer}
.lay-dock button[aria-checked="true"]{background:var(--kl,#F6A801);color:#111}
/* Simple and Kids: only what you need to play */
body.solo:not(.mob):is(.lay-simple,.lay-kids) .rig-panel .jy,
body.solo:not(.mob):is(.lay-simple,.lay-kids) #mixPanel>.mix-strip:not(:has(#ledPiano)),
body.solo:not(.mob):is(.lay-simple,.lay-kids) .kb-switches>:is(#lnTg,#sgTg,.rg-rec,#avCam,#avMic,#rgStudio,#avFb,#avVision,#avUndo,#avRedo,#avReset,.rg-div),
body.solo:not(.mob):is(.lay-simple,.lay-kids) #kbTools>:is(#mtk,#looper,#ctrTg,#eqWrap){display:none!important}
body.solo:not(.mob).lay-kids #kbTools>:is(#shSel){display:none!important}
/* Kids: rounder, friendlier keys and a bright Demo button */
body.solo:not(.mob).lay-kids #kb .kw{border-radius:0 0 16px 16px!important}
body.solo:not(.mob).lay-kids #kb .kb-black{border-radius:0 0 9px 9px!important}
body.solo:not(.mob).lay-kids #libBtn{background:var(--kl,#F6A801)!important;color:#111!important;border-color:var(--kl,#F6A801)!important}
body.solo:not(.mob).lay-kids #libBtn .hx-lab{max-width:80px!important;opacity:1!important;margin-left:6px!important}
body.solo:not(.mob).lay-kids .kb-switches .sus-ind,body.solo:not(.mob).lay-kids #kbTools .kl-btn{font-family:'Fredoka',var(--body)!important}
/* Teacher: up to three video windows, left, right, above or below the keys, or floating */
.tv-dock{display:flex;flex-direction:column;gap:12px}
.tv-dock[hidden]{display:none!important}
.tv-list{display:flex;flex-direction:column;gap:14px}
.tv-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tv-bar b{font:800 11px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:#a89f8c;margin-right:2px}
.tv-sp{flex:1}
.tv-add,.tv-rec{border:1px solid #3a3630;background:#1f1c18;color:var(--cream,#FBF6EC);border-radius:999px;padding:7px 12px;font:700 13px/1 var(--body);cursor:pointer;display:inline-flex;align-items:center;gap:7px}
.tv-add:hover,.tv-rec:hover{border-color:var(--kl,#F6A801)}.tv-add[hidden]{display:none}
.tv-rec i{width:10px;height:10px;border-radius:50%;background:#E5484D;display:block}
.tv-rec[aria-pressed="true"]{border-color:#E5484D;color:#fff;background:#3a1715}.tv-rec[aria-pressed="true"] i{animation:tvBlink 1s steps(2) infinite}
@keyframes tvBlink{50%{opacity:.2}}
.tv-mic{display:inline-flex;align-items:center;gap:5px;font:700 12px/1 var(--body);color:#a89f8c;cursor:pointer}
body.solo:not(.mob).lay-teacher:is(.lay-left,:not(.lay-below):not(.lay-above):not(.lay-free)) .hero .wrap{display:flex;align-items:flex-start;justify-content:center;gap:18px;max-width:none;width:calc(100% - 32px);margin:0 auto}
body.solo:not(.mob).lay-teacher:is(.lay-left,:not(.lay-below):not(.lay-above):not(.lay-free)) .hero .wrap>.kb-wrap{flex:0 1 calc(var(--solo-w,1400px) - 68px);min-width:0}
body.solo:not(.mob).lay-teacher:is(.lay-left,:not(.lay-below):not(.lay-above):not(.lay-free)) .tv-dock{flex:0 0 var(--tv-dw,clamp(220px,19vw,340px))}
body.solo:not(.mob).lay-teacher.lay-left .tv-dock{order:-1}
body.solo:not(.mob).lay-teacher:is(.lay-below,.lay-above,.lay-free) .hero .wrap{display:flex;flex-direction:column;align-items:stretch} /* the rig keeps its own width, so dragging its wooden ends still resizes it */
body.solo:not(.mob).lay-teacher.lay-above .tv-dock{order:-1;margin-bottom:46px} /* clear of the power switch on top of the case */
body.solo:not(.mob).lay-teacher:is(.lay-below,.lay-free) .tv-dock{margin-top:18px}
body.solo:not(.mob).lay-teacher:is(.lay-below,.lay-above) .tv-list{flex-direction:row}
body.solo:not(.mob).lay-teacher:is(.lay-below,.lay-above) .tv-slot{flex:1 1 0;min-width:0}
body.mob .tv-dock,body.mob #layBtn{display:none!important}
.tv-free .tv-list{display:contents}
.tv-free .tv-slot{position:fixed;z-index:290;box-shadow:0 24px 50px -18px rgba(0,0,0,.85)}
.tv-slot{position:relative;border-radius:16px;background:linear-gradient(180deg,#24211c,#181613);border:1px solid #3a3630;border-top:3px solid var(--kl,#F6A801);padding:8px;box-shadow:0 18px 40px -20px rgba(0,0,0,.7)}
.tv-slot.drag{opacity:.92;outline:2px solid var(--kl,#F6A801)}
.tv-top{display:flex;align-items:center;gap:6px;margin:0 0 6px;cursor:grab;touch-action:none}
.tv-grip{font-style:normal;color:#6b6355;font-size:12px;letter-spacing:-2px;padding:0 2px}
.tv-n{flex:0 1 auto;min-width:3ch;max-width:100%;margin-right:auto;background:transparent;border:0;color:var(--kl,#F6A801);font:700 15px/1.2 'Fredoka',var(--body);padding:2px 4px;border-radius:6px}
.tv-n:focus{outline:1px solid #5a5246;background:#1b1916}
.tv-mi{width:26px;height:26px;flex:none;border-radius:50%;border:1px solid #3a3630;background:#1f1c18;color:var(--cream,#FBF6EC);cursor:pointer;font:700 14px/1 var(--body);display:flex;align-items:center;justify-content:center;padding:0}
.tv-mi:hover{border-color:var(--kl,#F6A801)}.tv-mi.tv-live{display:none}.tv-slot.live .tv-mi.tv-live{display:flex}
.tv-rs{position:absolute;right:3px;bottom:3px;width:16px;height:16px;cursor:nwse-resize;display:none;touch-action:none;background:linear-gradient(135deg,transparent 50%,#6b6355 50%,#6b6355 60%,transparent 60%,transparent 70%,#6b6355 70%,#6b6355 80%,transparent 80%)}
body.lay-teacher .tv-slot .tv-rs{display:block}
.tv-v{position:relative;aspect-ratio:16/9;border-radius:11px;overflow:hidden;background:#0d0c0a}
.tv-v video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none}
.tv-slot.live .tv-v video{display:block}.tv-slot.mir .tv-v video{transform:scaleX(-1)}
.tv-e{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer;color:#a89f8c;border:2px dashed #3a3630;border-radius:11px;text-align:center;padding:8px}
.tv-e:hover{border-color:var(--kl,#F6A801);color:var(--cream,#FBF6EC)}
.tv-e b{font:600 30px/1 var(--body);color:var(--kl,#F6A801)}.tv-e span{font:700 14px/1.2 var(--body)}.tv-e small{font:600 11.5px/1.3 var(--body)}
.tv-slot.live .tv-e{display:none}
.tv-pick{position:absolute;inset:0;background:rgba(17,17,17,.94);display:flex;flex-direction:column;justify-content:safe center;gap:6px;padding:10px;overflow:auto}
.tv-slot{cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}body.tv-dragging,body.tv-dragging *{cursor:grabbing!important;user-select:none!important}.tv-slot.drag{cursor:grabbing}.tv-slot .tv-n{cursor:text}
.tv-tip{font:600 12px/1.3 var(--body);color:#6b6355}
.tv-m{position:absolute;inset:0;overflow:hidden}
.tv-m>video,.tv-m>iframe{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover;display:none;transform-origin:50% 50%}
.tv-slot.live .tv-m>video,.tv-slot.live .tv-m>iframe{display:block}
.tv-shield{position:absolute;inset:0;display:none;cursor:pointer}.tv-slot.live .tv-shield{display:block}
.tv-slot.tv-ring .tv-v{box-shadow:0 0 0 3px var(--kl,#F6A801)}
.tv-slot.tv-sel{border-color:var(--kl,#F6A801)}
.tv-v{transition:border-radius .15s}
.tv-pickc,.tv-opt{z-index:330;overflow:auto}
.tv-pl{gap:6px!important}
.tv-pg{font:800 11px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:#a89f8c;margin:6px 2px 0}
.tv-pl>button{border:1px solid #3a3630;background:#1f1c18;color:var(--cream,#FBF6EC);border-radius:10px;padding:9px 11px;font:700 13.5px/1.2 var(--body);text-align:left;cursor:pointer}
.tv-pl>button:hover{border-color:var(--kl,#F6A801)}
.tv-url{display:flex;gap:6px;margin-top:4px}.tv-url input{flex:1;min-width:0;background:#141210;border:1px solid #3a3630;border-radius:10px;color:var(--cream,#FBF6EC);padding:9px 10px;font:600 13px/1.2 var(--body)}
.tv-url button{border:0;border-radius:10px;background:var(--kl,#F6A801);color:#111;font:800 13px/1 var(--body);padding:0 14px;cursor:pointer}
.tv-ue{color:#ff8a7a;font:600 12px/1.3 var(--body)}
.tv-ob{gap:10px!important}
.tv-ol{display:grid;grid-template-columns:96px 1fr 44px;align-items:center;gap:8px;font:700 12.5px/1.2 var(--body);color:#cfc6b4}
.tv-ol b{font:700 12px/1 var(--body);color:var(--kl,#F6A801);text-align:right}
.tv-ol input{width:100%;accent-color:var(--kl,#F6A801)}
.tv-os{display:grid;grid-template-columns:96px 1fr;align-items:center;gap:8px;font:700 12.5px/1.2 var(--body);color:#cfc6b4}
.tv-os .rg-seg{flex-wrap:wrap}.tv-os .rg-seg button{flex:1;border:0;background:transparent;color:var(--cream,#FBF6EC);border-radius:999px;padding:6px 8px;font:700 12px/1 var(--body);cursor:pointer;white-space:nowrap}
.tv-os .rg-seg button[aria-checked="true"]{background:var(--kl,#F6A801);color:#111}
.tv-oa{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}.tv-oa button{flex:1;border:1px solid #3a3630;background:#1f1c18;color:var(--cream,#FBF6EC);border-radius:999px;padding:8px 10px;font:700 12.5px/1 var(--body);cursor:pointer;white-space:nowrap}
.tv-oa button:hover{border-color:var(--kl,#F6A801)}
/* Record: audio and MIDI, or a video of the screen */
.rv-card{z-index:330}.rv-b{gap:8px!important}
.rv-o{display:grid;grid-template-columns:40px 1fr;grid-template-rows:auto auto;column-gap:10px;text-align:left;padding:11px 12px;border-radius:14px;border:1px solid #3a3630;background:#1f1c18;color:var(--cream,#FBF6EC);cursor:pointer;font:inherit}
.rv-o:hover{border-color:var(--kl,#F6A801)}
.rv-i{grid-row:1/3;width:40px;height:40px;border-radius:12px;background:#34302a;display:flex;align-items:center;justify-content:center;font-size:20px}
.rv-o b{font:700 15px/1.2 'Fredoka',var(--body)}.rv-o small{font:600 12px/1.35 var(--body);color:#a89f8c}
html.ffo-recvideo:where(:not(.fft-recvideo)) .rv-card{display:none!important}
#recBtn.rv-on #recLabel{max-width:none!important;opacity:1!important;margin-left:6px!important}
.tv-pick[hidden]{display:none}
.tv-pick button{border:1px solid #3a3630;background:#1f1c18;color:var(--cream,#FBF6EC);border-radius:10px;padding:8px 10px;font:700 13px/1.2 var(--body);text-align:left;cursor:pointer}
.tv-pick button:hover{border-color:var(--kl,#F6A801)}.tv-pick .tv-cx{background:transparent;text-align:center;color:#a89f8c}
.lay-tip{margin:6px 4px 0;font:600 12px/1.4 var(--body);color:#a89f8c;display:none}.lay-card.lay-t-on .lay-tip{display:block}
.demo-btn.live{border-color:var(--kl,#F6A801)!important;color:var(--kl,#F6A801)!important}
body.rg .kb-switches #libBtn{order:5!important}
@media (max-width:620px){body.rg .kb-switches #libBtn{order:4!important;flex:1 1 0!important;min-width:0;justify-content:center;padding-left:4px!important;padding-right:4px!important;margin-left:0!important}}
.amb-m{display:grid;grid-template-columns:auto 1fr 30px;align-items:center;gap:10px;padding:8px 12px;border-radius:12px;background:#1b1a17;font:800 12px/1 var(--body);color:#cfc6b4}
.amb-m b{font:800 12px/1 var(--body);color:var(--cream);text-align:right}
.amb-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.amb-grid.amb-g3{grid-template-columns:repeat(3,minmax(0,1fr))}.amb-g3 .amb-on{gap:7px;font-size:12.5px}
.amb-sec{margin:2px 0 -4px;font:800 11px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:#8a8170}
.amb-t{display:grid;gap:8px;padding:10px 12px 12px;border-radius:12px;background:#1b1a17;border:1px solid #2a2824;transition:border-color .15s,background .15s}
.amb-t.on{border-color:color-mix(in srgb,var(--kl,#F6A801) 45%,#2a2824);background:linear-gradient(180deg,#24211b,#1b1a17)}
.amb-on{display:flex;align-items:center;gap:9px;padding:0;border:0;background:none;color:#a99f8e;font:800 13.5px/1 var(--body);cursor:pointer;text-align:left}
.amb-on span{flex:1}
.amb-t.on .amb-on{color:var(--cream)}.amb-t.on .amb-on svg{color:var(--kl,#F6A801)}
.amb-led{width:8px;height:8px;border-radius:50%;background:#3a3630;flex:none}
.amb-t.on .amb-led{background:var(--kl,#F6A801);box-shadow:0 0 8px var(--kl,#F6A801)}
.amb-t.loading .amb-led{animation:ambPulse .8s ease-in-out infinite}
.amb-card input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;margin:0;border-radius:3px;background:linear-gradient(90deg,var(--kl,#F6A801) var(--v,50%),#34302a var(--v,50%));cursor:pointer}
.amb-card .amb-t:not(.on) input[type=range]{background:linear-gradient(90deg,#6b6355 var(--v,50%),#2c2924 var(--v,50%))}
.amb-card input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--cream);border:2px solid #111;box-shadow:0 1px 4px rgba(0,0,0,.5)}
.amb-card input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--cream);border:2px solid #111}
.amb-ft{display:flex;align-items:center;gap:10px}
.amb-stop{flex:none;height:30px;padding:0 14px;border-radius:999px;border:1px solid #3a3630;background:#1d1b18;color:#e8e0d0;font:800 12px/1 var(--body);cursor:pointer}
.amb-ft small{font:600 11px/1.35 var(--body);color:#8a8170}
html.ffo-ambience:where(:not(.fft-ambience)) .amb-card{display:none!important}
/* ---- ch1: the Key, a little screen next to the tempo, and its real-keys picker ---- */
body.solo .rs-key{display:inline-flex;align-items:center;gap:2px;height:44px;padding:0 4px;box-sizing:border-box;border-radius:999px;border:1px solid #3a3630;background:#262420;flex:none;color:var(--cream)}
body.solo .rs-key .rs-l{display:none}
body.solo .rs-key .rs-b{width:26px;height:34px;flex:0 0 26px;border-radius:8px;color:#bfb6a4}
body.solo .rs-key .rs-b:hover{color:var(--cream)}
body.solo .rs-key #rootName{display:inline-flex;align-items:baseline;justify-content:center;gap:5px;height:32px;min-width:72px;padding:0 9px;box-sizing:border-box;border-radius:7px;border:0;
background:radial-gradient(130% 150% at 50% 0,#3a2805 0,#1f1503 75%);box-shadow:inset 0 0 0 1px #5a400a,inset 0 0 10px rgba(0,0,0,.6);color:#ffc23d;font:400 24px/32px 'VT323',monospace;letter-spacing:.04em;text-shadow:0 0 2px #ffb000,0 0 10px rgba(255,190,40,.55)}
body.solo .rs-key #rootName::before{content:'KEY';font:400 13px/1 'VT323',monospace;letter-spacing:.08em;color:#e0a520;text-shadow:0 0 6px rgba(255,190,40,.4)}
body.solo .rs-key #rootName:hover,body.solo .rs-key #rootName[aria-expanded="true"]{box-shadow:inset 0 0 0 1px #8a6512,inset 0 0 10px rgba(0,0,0,.6),0 0 0 3px rgba(246,168,1,.25)}
body.solo .rs-key .root-pick{left:-1px;bottom:calc(100% + 14px);width:340px;padding:14px 14px 16px;background:linear-gradient(180deg,#22201c,#191815);color:var(--cream);border:1px solid #3a3630;border-radius:18px;
box-shadow:0 22px 50px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.05);animation:rpIn .2s cubic-bezier(.2,.8,.2,1)}
body.solo .rs-key .root-pick::after{background:#191815;border-right:1px solid #3a3630;border-bottom:1px solid #3a3630}
body.solo .rs-key .rp-head b{font-family:var(--display);font-weight:600;font-size:17px;color:var(--cream)}
body.solo .rs-key .rp-head span{font-weight:700;font-size:11.5px;color:#a99f8e}
body.solo .rs-key .rp-kb{height:134px;padding:6px 6px 0;border-radius:10px;background:linear-gradient(180deg,#0e0d0c,#151412);box-shadow:inset 0 2px 6px rgba(0,0,0,.8)}
body.solo .rs-key .rp-w{border:0;border-right:1px solid #1a1917;border-radius:0 0 6px 6px;background:linear-gradient(180deg,#d9d2c3 0,#f6f1e6 9%,#fffdf8 70%,#ece5d6 100%);box-shadow:inset 0 -5px 0 #ddd5c5,inset 0 1px 0 rgba(255,255,255,.8);
color:#7a7061;font:800 12px/1 var(--body);padding-bottom:12px;transition:background .12s,box-shadow .12s}
body.solo .rs-key .rp-w:first-child{border-left:0}
body.solo .rs-key .rp-b{top:6px;height:60%;width:calc((100% - 12px) / 7 * .6);margin-left:6px;border-radius:0 0 5px 5px;background:linear-gradient(180deg,#3a3734 0,#151412 18%,#0b0a09 82%,#22201d 100%);
box-shadow:inset 0 -5px 0 #000,inset 1px 0 0 rgba(255,255,255,.06),0 3px 6px rgba(0,0,0,.55);color:#8a8170;font:800 9.5px/1 var(--body);padding-bottom:9px}
body.solo .rs-key .rp-b[style]{left:calc(6px + (100% - 12px) / 7 * var(--wi))!important;margin-left:0}
body.solo .rs-key .rp-w:hover{background:linear-gradient(180deg,#d9d2c3 0,#fff6dc 9%,#fff1c9 100%)}
body.solo .rs-key .rp-b:hover{background:linear-gradient(180deg,#4a4642 0,#24221f 18%,#191816 100%)}
body.solo .rs-key .rp-w[aria-checked="true"]{background:linear-gradient(180deg,#c98700 0,#ffc94d 12%,var(--kl,#F6A801) 100%);box-shadow:inset 0 -5px 0 #c98700,0 0 18px rgba(246,168,1,.45);color:#111}
body.solo .rs-key .rp-b[aria-checked="true"]{background:linear-gradient(180deg,#a56f00 0,var(--kl,#F6A801) 30%,#c98700 100%);box-shadow:inset 0 -5px 0 #7a5200,0 0 14px rgba(246,168,1,.5);color:#111}
@media (max-width:620px){body.solo .rs-key .root-pick{width:min(340px,calc(100vw - 32px))}}
/* ---- teasers: a locked feature with a Soon badge, and the "coming soon" card ---- */
.ft-lock{cursor:pointer!important}
.ft-top{filter:saturate(.55) brightness(.82)}
.ft-top .ft-badge{filter:saturate(1.8) brightness(1.22)}
.ft-badge{position:absolute;top:-8px;left:50%;transform:translateX(-50%);z-index:30;display:inline-flex;align-items:center;gap:3px;height:16px;padding:0 7px 0 6px;border-radius:999px;background:var(--kl,#F6A801);color:#111;font:900 8.5px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;pointer-events:none;box-shadow:0 2px 8px rgba(0,0,0,.45);font-style:normal}
.ft-badge svg{flex:none;display:block}
.ft-badge.ft-mem{background:#111;color:var(--kl,#F6A801);box-shadow:inset 0 0 0 1.5px var(--kl,#F6A801),0 2px 8px rgba(0,0,0,.45)}
.ft-card p.ft-up{color:var(--kl,#F6A801);font-weight:800}
.ft-card .ft-go{margin-top:10px;height:36px;padding:0 16px;border-radius:999px;border:0;background:var(--kl,#F6A801);color:#111;font:800 13.5px/1 var(--body);cursor:pointer}
.ft-badge.ft-dot{top:-6px;left:auto;right:-6px;transform:none;width:16px;height:16px;padding:0;justify-content:center}
.ft-card{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom,0px));z-index:400;display:flex;align-items:flex-start;gap:12px;width:min(420px,calc(100vw - 32px));box-sizing:border-box;padding:14px 14px 14px 14px;border-radius:16px;background:#1b1a17;border:1px solid #3a3630;border-top:3px solid var(--kl,#F6A801);box-shadow:0 20px 50px rgba(0,0,0,.6);color:var(--cream);transform:translate(-50%,24px);opacity:0;pointer-events:none;transition:transform .28s cubic-bezier(.2,.8,.2,1),opacity .2s}
.ft-card.on{transform:translate(-50%,0);opacity:1;pointer-events:auto}
.ft-card .ft-ic{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--kl,#F6A801);color:#111}
.ft-card .ft-ic svg{width:15px;height:15px}
.ft-card>div{flex:1;min-width:0}
.ft-card small{display:block;font:800 11px/1.2 var(--body);letter-spacing:.06em;text-transform:uppercase;color:#a99f8e;margin-bottom:3px}
.ft-card small .ch1t{font-size:13px;color:var(--kl,#F6A801);letter-spacing:0;text-transform:none}
.ft-card>div>b{display:block;font:800 16px/1.25 var(--display,var(--body));color:var(--cream)}
.ft-card p{margin:4px 0 0;font:600 13px/1.4 var(--body);color:#cfc6b4}
.ft-card .ft-x{flex:none;width:28px;height:28px;border:0;border-radius:50%;background:#2a2824;color:#cfc6b4;font-size:18px;line-height:1;cursor:pointer}
/* top bar fit steps (see the script "the top bar always stays on one line") */
@media (min-width:621px){
body.solo.tb-fit1 .kb-switches{column-gap:7px!important}
body.solo.tb-fit1 .kb-switches .ks-l{font-size:0!important;gap:0!important}
body.solo.tb-fit2 .kb-switches :is(#lnTg,#sgTg,#kmTg,#scTg){font-size:0!important;gap:0!important;padding-left:12px!important;padding-right:12px!important}
body.solo.tb-fit2 .kb-switches :is(#lnTg,#sgTg,#kmTg,#scTg)>span{font-size:15px!important;margin:0!important}
body.solo.tb-fit2 .kb-switches #mlLabel{display:none!important}
body.solo.tb-fit3 .kb-switches #midiLabel{font-size:0!important}
body.solo.tb-fit3 .kb-switches #midiLabel::after{content:'MIDI';font-size:15px}
}
/* ---- ch1 top bar, tidier: Learn, Song and Key map are icons (a tooltip explains each); Keys is one icon that opens the size
picker; Sustain is back on screen for anyone without a pedal ---- */
@media (min-width:621px){
body.solo .kb-switches .tb-ic,body.solo.tb-fit2 .kb-switches .tb-ic:is(#lnTg,#sgTg,#kmTg){width:36px;min-width:36px;height:28px;padding:0!important;justify-content:center;gap:0!important;font-size:0!important;flex:none!important}
body.solo .kb-switches .tb-ic .tb-lab{display:none}
body.solo .kb-switches .tb-ic>span[aria-hidden]{font-size:15px;margin:0!important}
body.solo .kb-switches .tb-ic .sw-ic{width:17px;height:17px;margin:0!important}
body.solo .kb-size.ks-pop{position:relative;display:inline-flex}
body.solo .kb-size.ks-pop>.ks-l{display:none!important}
body.solo .kb-size.ks-pop>.ks-seg{display:none;position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);z-index:60;padding:6px;gap:4px;border-radius:12px;border:1px solid #3a3630;background:#181715;box-shadow:0 14px 30px rgba(0,0,0,.55)}
body.solo .kb-size.ks-pop.open>.ks-seg{display:flex}
body.solo .kb-size.ks-pop.open>.ks-seg::before{content:"";position:absolute;top:-6px;left:50%;width:10px;height:10px;transform:translateX(-50%) rotate(45deg);background:#181715;border-left:1px solid #3a3630;border-top:1px solid #3a3630}
body.solo .ks-btn{display:inline-grid;place-items:center;width:36px;height:28px;padding:0;border-radius:999px;border:1px solid #3a3630;background:transparent;color:#bfb6a4;cursor:pointer}
body.solo .ks-btn:hover,body.solo .kb-size.open .ks-btn{border-color:#5a544a;color:var(--cream)}
body.solo .ks-btn svg{width:18px;height:18px}
}
@media (max-width:620px){.ks-btn{display:none!important}}
body.solo .kb-switches #susInd{display:inline-flex!important;order:10;margin-left:0!important}
/* one tooltip for every button in the top bar */
.tb-tip{position:fixed;z-index:9999;max-width:260px;padding:8px 11px;border-radius:9px;background:#0f0e0c;border:1px solid #3a3630;color:#e9e1d1;font:600 12.5px/1.4 var(--body);box-shadow:0 10px 24px rgba(0,0,0,.5);pointer-events:none;opacity:0;transform:translateY(-3px);transition:opacity .12s,transform .12s}
.tb-tip.on{opacity:1;transform:none}.tb-tip:not(.on){transition:opacity .5s ease,transform .5s ease}
.tb-tip.up::before{top:auto;bottom:-5px;border-left:0;border-top:0;border-right:1px solid #3a3630;border-bottom:1px solid #3a3630}
.tb-tip b{display:block;color:var(--kl,#F6A801);font-weight:800;margin-bottom:2px}
.tb-tip::before{content:"";position:absolute;top:-5px;left:var(--ax,50%);width:8px;height:8px;transform:translateX(-50%) rotate(45deg);background:#0f0e0c;border-left:1px solid #3a3630;border-top:1px solid #3a3630}
/* panel names fold the panel */
html:not(.ffo-panelmin:where(:not(.fft-panelmin))) body.solo .rig-panel .ms-name{cursor:pointer;border-radius:5px}
html:not(.ffo-panelmin:where(:not(.fft-panelmin))) body.solo .rig-panel .ms-name:hover{filter:brightness(1.25)}
html:not(.ffo-panelmin:where(:not(.fft-panelmin))) body.solo .rig-panel .ms-name:focus-visible{outline:2px solid var(--kl,#F6A801);outline-offset:3px}
html.ffo-panelmin:where(:not(.fft-panelmin)) body.solo .rig-panel .ms-name{pointer-events:none}
/* screen on the right: a little space before it */
@media (min-width:1241px){html body.solo.lcd-right .rig-panel .kb-side{margin-left:12px}}
/* Scale light: the colour for notes outside the scale */
.kl-slc-row{display:flex;align-items:center;gap:8px;margin-top:8px}
.kl-slc-row>small{font:800 11px/1 var(--body);color:#8e8573;letter-spacing:.04em;margin-right:2px;white-space:nowrap}
.kl-slc-row{margin-bottom:4px}.kl-slc-row .kl-sw{margin:0;display:flex;gap:7px;flex-wrap:wrap}.kl-slc-row .kl-sw button:not([aria-checked="true"]){box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}.kl-slc-row .kl-sw>*{width:24px;height:24px;flex:none}
/* corner logo: a soft shimmer every few minutes (switch: shimmer) */
body.solo .ch1-plate .ch1-shine{pointer-events:none}
body.solo .ch1-plate.shimmering .ch1{animation:ch1Glow 1.8s ease-in-out}
@keyframes ch1Glow{0%,100%{filter:drop-shadow(0 0 6px rgba(246,168,1,.45)) drop-shadow(0 1px 0 rgba(0,0,0,.8))}45%{filter:drop-shadow(0 0 14px rgba(246,168,1,.9)) drop-shadow(0 0 3px rgba(255,236,190,.8)) drop-shadow(0 1px 0 rgba(0,0,0,.8))}}
@media (prefers-reduced-motion:reduce){body.solo .ch1-plate.shimmering .ch1{animation:none}}
body.solo .lcd{cursor:pointer;will-change:transform}
/* touch meter: the chord screen's rounded frame glows brighter the harder you play, then settles back */
@property --tmv{syntax:'';inherits:false;initial-value:0}
.lcd-tm{display:none}
body.solo.tm-on .lcd{box-shadow:inset 0 0 0 1px #5a400a,inset 0 0 14px rgba(0,0,0,.6),0 0 0 3px #050505,0 0 0 4px rgba(246,168,1,.12)}
/* the glow itself is its own layer that only fades in and out (the screen never has to be redrawn for it) */
.lcd-tmg{display:none}
body.solo.tm-on .lcd-tmg{display:block;position:absolute;pointer-events:none;z-index:3;border-radius:12px;opacity:0;will-change:opacity;box-shadow:0 0 0 4px rgba(246,168,1,.7),0 0 24px 1px rgba(246,168,1,.55)}
body.solo.tm-on .lcd.lcd-off+.lcd-tmg{display:none}
/* screen off: like an old TV in standby. Only ch one, the ID, the address, MIDI and SUS stay, dimmed */
body.solo .lcd.lcd-off{background:radial-gradient(130% 150% at 50% 0,#1b1303 0,#0d0901 75%)}
body.solo .lcd.lcd-off .lcd-main,body.solo .lcd.lcd-off .lcd-row,body.solo .lcd.lcd-off #lcdMode,body.solo .lcd.lcd-off #lcdKey,body.solo .lcd.lcd-off #lcdTr{visibility:hidden}
body.solo .lcd.lcd-off .lcd-top,body.solo .lcd.lcd-off .lcd-wm{opacity:.38;filter:saturate(.8)}
body.solo .lcd.lcd-off .lcd-wm{opacity:.32}
.lcd-crt{display:none}
body.solo .lcd-crt{display:block;position:absolute;inset:0;z-index:5;pointer-events:none;opacity:0;background:radial-gradient(ellipse at center,#fff6dc 0,#ffd06b 45%,rgba(255,176,0,.0) 100%);transform-origin:50% 50%}
body.solo .lcd.crt-off .lcd-crt{animation:crtOff .5s cubic-bezier(.55,0,.75,.2) forwards}
body.solo .lcd.crt-on .lcd-crt{animation:crtOn .55s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes crtOff{0%{opacity:.85;transform:scale(1,1)}45%{opacity:1;transform:scale(1,.012)}80%{opacity:1;transform:scale(.06,.012)}100%{opacity:0;transform:scale(0,0)}}
@keyframes crtOn{0%{opacity:1;transform:scale(0,.012)}35%{opacity:1;transform:scale(1,.012)}70%{opacity:.6;transform:scale(1,1)}100%{opacity:0;transform:scale(1,1)}}
@media (prefers-reduced-motion:reduce){body.solo .lcd.crt-off .lcd-crt,body.solo .lcd.crt-on .lcd-crt{animation:none}}
/* boot: the chord screen starts up like a TV while ch1 loads (switch: boot) */
.lcd-boot{display:none}
body.solo .lcd-boot{display:flex;position:absolute;inset:0;z-index:4;align-items:center;justify-content:center;container-type:size;background:radial-gradient(130% 150% at 50% 0,#1b1303 0,#0d0901 75%);border-radius:inherit;transition:background .35s ease}
body.solo .lcd-boot::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.14) 0 1px,transparent 1px 3px)}
body.solo .lcd-boot.lb-on{background:radial-gradient(130% 150% at 50% 0,#3a2805 0,#1f1503 75%)}
body.solo .lb-in{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:min(7cqh,12px);width:min(78%,360px);opacity:0;transform:scale(.97);transition:opacity .35s ease,transform .45s cubic-bezier(.2,.7,.3,1)}
body.solo .lb-on .lb-in{opacity:1;transform:none}
body.solo .lb-logo{display:flex;flex-direction:column;align-items:center;gap:min(2.5cqh,5px)}
body.solo .lb-logo .ch1t{text-transform:none;font-size:min(30cqh,15cqw,58px);color:#ffc93d;padding-right:.08em;text-shadow:0 0 6px rgba(255,176,0,.55),0 0 18px rgba(255,150,0,.25)}
body.solo .lb-on .lb-logo .ch1t{animation:lbFlick 1.1s steps(1,end) 1}
.ch1t>i,.ch1t>b{display:none}
/* ch1 everywhere: the glyph takes the place of the old "ch one" words, at the same size, with a warm glow on dark grounds */
.ch1t .ch1g{display:inline-block;height:.78em;width:calc(.78em*1490/712);vertical-align:baseline;overflow:visible;filter:drop-shadow(0 0 .07em rgba(246,168,1,.55)) drop-shadow(0 0 .3em rgba(246,168,1,.22))}
:is(.pc-c,.btn,.pg-h-ch1,.btn-yellow) .ch1t .ch1g{filter:none}
.solo-title .ch1t .ch1g{height:1.12em;width:calc(1.12em*1490/712);position:relative;top:.06em}
.lcd-wm .wm-bl{display:inline-block;width:0;height:0;vertical-align:baseline}
/* the ch1 mark on the chord screen (switch: ch1plate, with the rig badge): the same glow and sizes as the words it replaces */
body.solo .lcd-wm .ch1t{flex:none}
body.solo .lcd-wm .ch1t .ch1g{width:calc(.82em*1490/712);height:.82em;filter:drop-shadow(0 0 2px rgba(246,168,1,.35))}
body.solo .lb-logo .ch1t .ch1g{filter:drop-shadow(0 0 6px rgba(255,176,0,.55)) drop-shadow(0 0 16px rgba(255,150,0,.25))}
body.solo .lb-logo small{font:800 min(6.5cqh,3.2cqw,11px)/1 var(--body);letter-spacing:.32em;text-transform:uppercase;color:#d9a43a;opacity:.8;padding-left:.32em}
body.solo .lb-bar{position:relative;width:100%;height:min(7cqh,10px);box-sizing:border-box;padding:2px;border:1px solid rgba(255,201,61,.45);border-radius:3px;box-shadow:0 0 6px rgba(255,176,0,.15)}
body.solo .lb-bar i{display:block;height:100%;width:0;border-radius:1px;background:repeating-linear-gradient(90deg,#ffc93d 0 6px,transparent 6px 8px);box-shadow:0 0 6px rgba(255,176,0,.6)}
body.solo .lb-st{display:flex;justify-content:space-between;align-items:baseline;width:100%;font-family:'VT323',ui-monospace,Menlo,monospace;font-size:min(11cqh,5.2cqw,17px);line-height:1;letter-spacing:.06em;text-transform:uppercase;color:#ffc93d;text-shadow:0 0 2px #ffb000}
body.solo .lb-st .lb-pct{font-variant-numeric:tabular-nums;opacity:.85}
body.solo .lb-ready .lb-msg{animation:lbBlink .42s steps(2,end) 1}
body.solo .lb-tap .lb-msg{animation:lbBlink 1.1s steps(2,end) infinite}body.solo .lb-tap{cursor:pointer}
body.solo .lcd-boot.lb-out{animation:lbOut .5s cubic-bezier(.5,0,.7,.4) forwards}
body.solo .lcd-boot.lb-out-fast{opacity:0;transition:opacity .15s ease}
@keyframes lbFlick{0%{opacity:.2}8%{opacity:1}14%{opacity:.45}22%{opacity:1}100%{opacity:1}}
@keyframes lbBlink{0%{opacity:.25}50%{opacity:1}}
@keyframes lbOut{0%{opacity:1;filter:brightness(1)}35%{opacity:1;filter:brightness(1.8)}100%{opacity:0;filter:brightness(1)}}
body.solo .lcd.booting .lcd-grip{visibility:hidden}
@media (prefers-reduced-motion:reduce){body.solo .lb-in{transition:none}body.solo .lb-on .lb-logo .ch1t,body.solo .lb-ready .lb-msg,body.solo .lb-tap .lb-msg{animation:none}body.solo .lcd-boot.lb-out{animation:none;opacity:0;transition:opacity .2s}}
html.ffo-lcdpower:where(:not(.fft-lcdpower)) body.solo .lcd{cursor:auto}
.lcd-main b,.lcd-main i,.lcd-row{transition:opacity .35s ease}
.lcd-in{animation:lcdIn .16s ease-out}
@keyframes lcdIn{from{opacity:.35}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.lcd-in{animation:none}}
/* ---------- ch1 "Real" keys (Key light > Keys > Real): photo-like keys, cool white with fine gaps, glossy black keys lit by position ---------- */
body.solo.real-keys #kb{background:#1a1a1a}
/* Key view: Tilted / Stage */
body.solo.kv-tilt .kb-scroll,body.solo.kv-stage .kb-scroll{perspective:var(--kv-p,1100px);perspective-origin:50% 100%;position:relative}
/* iPhone Safari lets 3D keys escape a scrolling box, so they jutted past the case: clip the sides (top and bottom stay free for the glow) */
body.solo.kv-tilt .kb-scroll,body.solo.kv-stage .kb-scroll{-webkit-clip-path:inset(-600px 0 -300px 0);clip-path:inset(-600px 0 -300px 0)}
body.solo.kv-tilt #kb,body.solo.kv-stage #kb{transform:rotateX(var(--kv-a,24deg)) scaleY(var(--kv-s,1));transform-origin:50% 100%;will-change:transform}
/* tilted: the gaps between white keys are one soft line pattern (2 to 3px, shaded) instead of hard 1px borders, so they stay
steady when the keys move and in screen recordings (OBS), where hairlines at an angle crawl. Over the white keys, under the black */
body.solo:is(.kv-tilt,.kv-stage):is(.real-keys,.keys-black,.keys-white) #kb .kw{border-left-color:transparent!important}
body.solo:is(.kv-tilt,.kv-stage):is(.real-keys,.keys-black,.keys-white) #kb::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
background:repeating-linear-gradient(90deg,var(--kgap,rgba(38,35,31,.62)) 0,var(--kgap,rgba(38,35,31,.62)) .6px,var(--kgap2,rgba(38,35,31,.22)) 1.6px,transparent 2.8px,transparent calc(100% / var(--nw,21)))}
body.solo:is(.kv-tilt,.kv-stage).keys-black #kb::after{--kgap:rgba(0,0,0,.9);--kgap2:rgba(0,0,0,.35)}
body.solo:is(.kv-tilt,.kv-stage).keys-white #kb::after{--kgap:rgba(150,141,126,.7);--kgap2:rgba(150,141,126,.25)}
body.solo.kv-tilt .kb-scroll::before,body.solo.kv-stage .kb-scroll::before{content:"";position:absolute;left:0;right:0;top:0;height:60%;pointer-events:none;z-index:0;
background:radial-gradient(55% 70% at 50% 0,color-mix(in srgb,var(--kl,#F6A801) 16%,transparent),transparent 75%)}
body.solo.kv-tilt.names-press #kb .on::after{transform:translateX(-50%) scaleY(.88);transform-origin:50% 100%}
body.solo.kv-stage.names-press #kb .on::after{transform:translateX(-50%) scaleY(.7);transform-origin:50% 100%}
body.solo.kv-tilt #kb .kn{transform:scaleY(.88);transform-origin:50% 100%}body.solo.kv-stage #kb .kn{transform:scaleY(.7);transform-origin:50% 100%}
/* Weighted keys: thick keys with a visible front edge; a pressed key dips at the front (it pivots at the back, so its front
edge disappears, the back falls into shadow and its neighbours stand taller), then springs back with a small bounce */
body.solo.wt-on #kb .kw,body.solo.wt-on #kb .kb-black{transform-origin:50% 0;transition:box-shadow .2s cubic-bezier(.3,1.5,.55,1),scale .2s cubic-bezier(.3,1.5,.55,1)}
/* rest: the front edge of each white key is its own lit face (lighter bevel on top, darker toward the floor). It sits under
the key's own shading, so Real keys keep their soft shadow at both ends and the outer keys stay a little darker */
html body.solo.wt-on #kb .kw:not(.on):not(.ln-t):not(.heard):not(.sc-t):not(.sc-ok):not(.sc-no):not(.sg-t)::before{content:"";position:absolute;left:0;right:0;bottom:0;height:11px;pointer-events:none;z-index:0;
background:linear-gradient(rgba(20,16,12,var(--ke,0)),rgba(20,16,12,var(--ke,0))),linear-gradient(180deg,rgba(0,0,0,0) 0,rgba(60,45,25,.09) 2px,rgba(255,255,255,.55) 3.5px,#efe9dd 5px,#e2dacb 55%,#cdc3b1 100%);border-radius:0 0 5px 5px}
html body.solo.wt-on:not(.real-keys) #kb .kw:not(.on):not(.ln-t):not(.heard):not(.sc-t):not(.sc-ok):not(.sc-no):not(.sg-t){background-image:linear-gradient(rgba(20,16,12,var(--ke,0)),rgba(20,16,12,var(--ke,0)))}
html body.solo.wt-on:not(.real-keys) #kb .kw:first-child:not(.on):not(.ln-t):not(.heard):not(.sc-t):not(.sc-ok):not(.sc-no):not(.sg-t){box-shadow:inset 14px 0 14px -7px rgba(0,0,0,.45)}
html body.solo.wt-on:not(.real-keys) #kb .kw.kw-last:not(.on):not(.ln-t):not(.heard):not(.sc-t):not(.sc-ok):not(.sc-no):not(.sg-t){box-shadow:inset -14px 0 14px -7px rgba(0,0,0,.45)}
html body.solo.wt-on #kb .kw .kn,html body.solo.wt-on #kb .kw .kkey{position:relative;z-index:1}
html body.solo.wt-on #kb .kw.on{scale:1 .992;box-shadow:inset 0 -3px 0 color-mix(in srgb,var(--kl) 65%,#4a2f00),inset 0 16px 14px -10px rgba(0,0,0,.22),inset 3px 0 4px -2px rgba(0,0,0,.4),inset -3px 0 4px -2px rgba(0,0,0,.4),0 14px 22px -6px color-mix(in srgb,var(--kl) 75%,transparent)!important;
background-image:linear-gradient(180deg,rgba(0,0,0,.07),transparent 22%)!important;transition:box-shadow .05s ease-out,scale .05s ease-out}
html body.solo.wt-on #kb .kb-black:not(.on):not(.ln-t):not(.heard):not(.sc-t):not(.sc-ok):not(.sc-no):not(.sg-t){box-shadow:inset 0 -18px 0 #3b3633,inset 0 -19px 0 #5a5450,inset 2px 0 0 #2c2826,inset -2px 0 0 #4a4542,0 4px 6px rgba(0,0,0,.45)!important}
html body.solo.wt-on.real-keys #kb .kb-black:not(.on):not(.ln-t):not(.heard):not(.sc-t):not(.sc-ok):not(.sc-no):not(.sg-t)::after{display:none}
html body.solo.wt-on #kb .kb-black.on{scale:1 .965;box-shadow:inset 0 -5px 0 color-mix(in srgb,var(--kl) 40%,#000),inset 0 22px 16px -10px rgba(0,0,0,.6),inset 3px 0 3px -1px rgba(0,0,0,.5),inset -3px 0 3px -1px rgba(0,0,0,.5),0 1px 2px rgba(0,0,0,.5)!important;transition:box-shadow .05s ease-out,scale .05s ease-out}
html body.solo.wt-on.names-press #kb .kw.on::after{bottom:18px}
/* Glow: the pressed key really lights up: a bright core, a bloom that spills onto the keys around it and light pooling under
it, never up past the top of the keys (clipped there). Written after the weighted-keys press shading (which would otherwise replace it) and keeps that shading */
html body.solo.kl-glow #kb .kw.on{z-index:1;clip-path:inset(0 -40px 0 -40px);
background-color:var(--kl)!important;background-image:radial-gradient(ellipse 85% 55% at 50% 82%,rgba(255,250,225,.95) 0%,color-mix(in srgb,var(--kl) 60%,#fff6d8) 35%,rgba(255,255,255,0) 75%),linear-gradient(180deg,color-mix(in srgb,var(--kl) 80%,#000) 0%,rgba(0,0,0,0) 35%)!important;
box-shadow:0 0 0 1px color-mix(in srgb,var(--kl) 70%,#fff),0 0 8px 1px color-mix(in srgb,var(--kl) 95%,transparent),0 0 22px 4px color-mix(in srgb,var(--kl) 60%,transparent),0 26px 34px -4px color-mix(in srgb,var(--kl) 70%,transparent),inset 0 0 0 1px rgba(255,255,255,.35),inset 0 -3px 0 color-mix(in srgb,var(--kl) 60%,#4a2f00)!important;
animation:klLit .35s ease-out}
html body.solo.kl-glow #kb .kb-black.on{clip-path:inset(0 -34px -2px -34px);
background-color:var(--kl)!important;background-image:radial-gradient(ellipse 90% 45% at 50% 85%,rgba(255,248,215,.9) 0%,color-mix(in srgb,var(--kl) 70%,#fff2c8) 35%,rgba(255,255,255,0) 75%),linear-gradient(180deg,color-mix(in srgb,var(--kl) 60%,#000) 0%,rgba(0,0,0,0) 40%)!important;
box-shadow:0 0 0 1px color-mix(in srgb,var(--kl) 70%,#fff),0 0 8px 1px color-mix(in srgb,var(--kl) 95%,transparent),0 0 20px 4px color-mix(in srgb,var(--kl) 60%,transparent),inset 0 -4px 0 color-mix(in srgb,var(--kl) 45%,#000)!important;
animation:klLit .35s ease-out}
@keyframes klLit{from{filter:brightness(1.35) saturate(1.2)}to{filter:none}}
@media (prefers-reduced-motion:reduce){html body.solo.kl-glow #kb .on{animation:none}}
/* Clean note labels: the letters without the dark ring */
body.solo.lbl-clean.names-press #kb .on::after{box-shadow:0 2px 8px rgba(0,0,0,.18)}
body.solo.lbl-clean #kb .kw .kn{box-shadow:none;border:0}
html.ffo-keyview:where(:not(.fft-keyview)) .kv-l,html.ffo-keyview:where(:not(.fft-keyview)) .kv-seg{display:none!important}
body.solo.real-keys #kb .kw{border:0;border-left:1px solid #3e3b37;border-radius:0 0 4px 4px}
body.solo.real-keys #kb .kw:not(.on):not(.ln-t):not(.heard):not(.sc-t):not(.sc-ok):not(.sc-no):not(.sg-t){background-color:#f4f3f0;
background-image:linear-gradient(rgba(20,16,12,var(--ke,0)),rgba(20,16,12,var(--ke,0))),linear-gradient(180deg,#c6c5c1 0,#e2e1dd 4px,#efeeeb 16px,#f7f6f3 55%,#f3f2ef 88%,#e8e7e3 100%);
box-shadow:inset -1px 0 0 #ffffff,inset 0 -3px 0 #e2e1dd,0 1px 0 #9a978f}
/* Real, straight view: each white key ends on its own. Its front edge is its own rounded face with the gap carried right
through it, and the keys sit on a dark key rail with a soft shadow under their fronts */
html body.solo.real-keys:not(.kv-tilt):not(.kv-stage) #kb .kw:not(.on):not(.ln-t):not(.heard):not(.sc-t):not(.sc-ok):not(.sc-no):not(.sg-t)::before{content:"";position:absolute;bottom:0;pointer-events:none;z-index:0;left:1px;right:0;height:9px;border-radius:0 0 4px 4px;
background:linear-gradient(180deg,rgba(0,0,0,.10) 0,rgba(255,255,255,.7) 1.5px,#ecebe7 3px,#dedcd6 60%,#c9c6be 100%);box-shadow:0 1px 0 rgba(0,0,0,.35)}
html body.solo.real-keys:not(.kv-tilt):not(.kv-stage) #kb .kw{border-radius:0 0 5px 5px}
html body.solo.real-keys:not(.kv-tilt):not(.kv-stage) #kb{box-shadow:0 1px 0 #0b0a09,0 6px 0 -1px #1b1916,0 7px 0 -1px #2a2723,0 12px 14px -4px rgba(0,0,0,.6)}
/* depth at both ends: the outer keys sit a little in shadow, and the end blocks cast a soft shadow onto the first and last key */
body.solo.real-keys #kb .kw:first-child:not(.on):not(.ln-t):not(.heard):not(.sc-t):not(.sc-ok):not(.sc-no):not(.sg-t){box-shadow:inset 14px 0 14px -7px rgba(0,0,0,.5),inset -1px 0 0 #ffffff,inset 0 -3px 0 #e2e1dd,0 1px 0 #9a978f}
body.solo.real-keys #kb .kw:nth-last-child(1 of .kw):not(.on):not(.ln-t):not(.heard):not(.sc-t):not(.sc-ok):not(.sc-no):not(.sg-t){box-shadow:inset -14px 0 14px -7px rgba(0,0,0,.5),inset 0 -3px 0 #e2e1dd,0 1px 0 #9a978f}
body.solo.real-keys #kb .kw.kw-last:not(.on):not(.ln-t):not(.heard):not(.sc-t):not(.sc-ok):not(.sc-no):not(.sg-t){box-shadow:inset -14px 0 14px -7px rgba(0,0,0,.5),inset 0 -3px 0 #e2e1dd,0 1px 0 #9a978f}
body.solo.real-keys #kb .kb-black{border:0;border-radius:0 0 2px 2px;overflow:hidden}
/* black key: dark top, a light bevel on the lit side, a darker one on the other, and a chamfered front at the tip */
body.solo.real-keys #kb .kb-black:not(.on):not(.ln-t):not(.heard):not(.sc-t):not(.sc-ok):not(.sc-no):not(.sg-t){background-color:#1d1a19;
background-image:
linear-gradient(90deg,#2b2726 0,#221f1e var(--bl,6%),transparent var(--bl,6%),transparent calc(100% - var(--br,12%)),#4a4542 calc(100% - var(--br,12%)),#6b6560 100%),
linear-gradient(180deg,#2a2625 0,#1d1a19 5%,#191615 100%);
box-shadow:0 0 0 1px #0a0908}
body.solo.real-keys #kb .kb-black:not(.on):not(.ln-t):not(.heard):not(.sc-t):not(.sc-ok):not(.sc-no):not(.sg-t)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:9%;min-height:8px;pointer-events:none;
background:linear-gradient(180deg,#4d4845 0,#38332f 35%,#2a2624 100%);
clip-path:polygon(var(--bl,6%) 0,calc(100% - var(--br,12%)) 0,100% 100%,0 100%)}
body.solo.real-keys #kb .kb-black:not(.on):not(.ln-t):not(.heard):not(.sc-t):not(.sc-ok):not(.sc-no):not(.sg-t)::before{content:"";position:absolute;left:var(--bl,6%);right:var(--br,12%);top:0;bottom:9%;pointer-events:none;
background:linear-gradient(90deg,transparent 0,rgba(255,255,255,.05) 55%,transparent 85%)}
/* ---------- ch1 "How to connect" guide ---------- */
.hc-btn{display:none}
body.solo .rig-panel .kb-side{grid-template-columns:1fr 1fr 40px!important}
body.solo .rig-panel .kb-side .lcd{grid-column:1/-1!important}
body.solo .rig-panel .kb-side .hc-btn{display:inline-flex;grid-row:1;grid-column:3;width:40px;height:40px;padding:0;border-radius:50%;justify-content:center;align-items:center;color:var(--yellow);background:#1f1d19;border:1px solid #3a3630;cursor:pointer}
body.solo .rig-panel .kb-side .hc-btn:hover{background:#2a2620}
body.solo .rig-panel .kb-side .hc-btn.nudge{animation:hcNudge 1.6s ease-in-out infinite;border-color:var(--yellow)}
@keyframes hcNudge{0%,100%{box-shadow:0 0 0 0 rgba(246,168,1,.0)}50%{box-shadow:0 0 0 6px rgba(246,168,1,.28)}}
body.solo .rig-panel .kb-side .midi-btn,body.solo .rig-panel .kb-side .listen-btn{padding:0 10px!important;min-width:0}
.hc{position:fixed;inset:0;z-index:320;display:grid;place-items:center;padding:16px;box-sizing:border-box;background:rgba(10,9,8,.66);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.hc[hidden]{display:none}
/* ---- Takes (switch: takes): the MIDI side of Rec ---- */
.mt-btn,.rt-mt,.mt-mini{display:none}
body.solo .kb-switches .mt-btn{display:inline-grid;place-items:center;order:12;flex:none;width:36px;min-width:36px;height:28px;padding:0;box-sizing:border-box;border-radius:999px;border:1px solid #3a3630;background:transparent;color:#bfb6a4;cursor:pointer}
body.solo .kb-switches .mt-btn:hover,body.solo .kb-switches .mt-btn:focus-visible{color:var(--cream);border-color:#5a554c}
body.solo .kb-switches .mt-btn.has{color:var(--yellow);border-color:#6b5a2a}
body.solo .rec-take .rt-mt{display:inline-flex}
html.ffo-takes:where(:not(.fft-takes)) .mt-btn,html.ffo-takes:where(:not(.fft-takes)) .rt-mt,html.ffo-takes:where(:not(.fft-takes)) .mt-mini:not(.lib),html.ffo-takes:where(:not(.fft-takes)) .lcd-take,html.ffo-takes:where(:not(.fft-takes)) .lcd-pb,
html.ffo-record:where(:not(.fft-record)) .mt-btn,html.ffo-record:where(:not(.fft-record)) .mt-mini:not(.lib){display:none!important}
.hc-card.mt-card{max-width:720px}
.hc-card.mt-card.mt-wide{max-width:min(1040px,calc(100vw - 32px))}
.mt-cur{background:#11100e;border:1px solid #2e2b26;border-radius:16px;padding:12px;margin:0 0 16px}
.mt-cur[hidden],.mt-v[hidden],.mt-note[hidden],.mt-empty[hidden],.mt-b[hidden]{display:none}
.mt-r1{display:flex;align-items:center;gap:10px;margin:0 0 10px}
.mt-name{flex:1 1 auto;min-width:0;height:38px;box-sizing:border-box;border-radius:10px;border:1px solid #3a3630;background:#1d1b18;color:var(--cream);font:800 15px var(--body);padding:0 12px;outline:0}
.mt-name:focus{border-color:var(--yellow)}
.mt-meta{flex:none;font:700 13px var(--body);color:#bdb4a2;white-space:nowrap}
.mt-roll{display:block;width:100%;height:120px;border-radius:10px;background:#0b0a09;cursor:pointer}
.mt-acts{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0}
.mt-b{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:38px;padding:0 15px;box-sizing:border-box;border-radius:999px;border:1px solid #3a3630;background:#24211c;color:var(--cream);font:800 14px/1 var(--body);cursor:pointer;white-space:nowrap;text-decoration:none}
.mt-b:hover{border-color:#5a554c;background:#2c2924}
.mt-b.pri{background:var(--yellow);border-color:var(--yellow);color:#111}
.mt-b.pri:hover{background:#ffbb24;border-color:#ffbb24}
.mt-b svg{display:block;flex:none}
.mt-ib{width:38px;padding:0}
.mt-note{margin:10px 0 0;font:700 13.5px/1.4 var(--body);color:#ffcf6b}
.mt-empty{margin:0 0 16px;padding:16px;border-radius:14px;border:1px dashed #3a3630;font:600 14.5px/1.45 var(--body);color:#bdb4a2;text-align:center}
.mt-empty b{color:var(--cream)}
.mt-sh{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 10px}
.mt-sh>b{font:800 16px var(--body);color:var(--cream)}
.mt-sh small{font-weight:700;font-size:12.5px;color:#a39a88;margin-left:4px}
.mt-open{position:relative}
.mt-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.mt-it{display:flex;align-items:center;gap:6px;padding:6px 6px 6px 4px;border-radius:12px;background:#1d1b18;border:1px solid #2e2b26}
.mt-it.cur{border-color:#7a5a12;background:#221d12}
.mt-it-n{flex:1 1 auto;min-width:0;display:block;text-align:left;border:0;background:none;color:var(--cream);padding:4px 10px;cursor:pointer;border-radius:8px}
.mt-it-n b{display:block;font:800 14.5px/1.25 var(--body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mt-it-n small{display:block;margin-top:2px;font:600 12.5px/1.2 var(--body);color:#a39a88;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mt-it .mt-ib{width:34px;height:34px;flex:none;background:transparent}
.mt-it .mt-del:hover{color:#ff8a7a;border-color:#5a2622}
.mt-none{padding:12px 4px;font:600 14px var(--body);color:#a39a88}
.mt-st{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin:0 44px 10px 0}
.mt-st [data-a="print"]{margin-left:auto}
@media (max-width:1100px){.mt-st .mt-ctl{order:3;flex-basis:100%}}
.mt-ctl{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;flex:1 1 auto;justify-content:center}
.mt-ctl label{display:inline-flex;align-items:center;gap:6px;font:800 13px var(--body);color:#bdb4a2}
.mt-ctl input,.mt-ctl select{height:34px;box-sizing:border-box;border-radius:8px;border:1px solid #3a3630;background:#1d1b18;color:var(--cream);font:800 14px var(--body);padding:0 8px}
.mt-ctl input{width:66px}
.mt-nudge{display:inline-flex;align-items:center;gap:6px}
.mt-nudge small{font:800 13px var(--body);color:#bdb4a2}
.mt-nudge .mt-ib{width:34px;height:34px;font-size:20px;line-height:1}
.mt-tip{margin:0 0 10px;min-height:1px;font:600 13px/1.4 var(--body);color:#a39a88;text-align:center}
.mt-paper{background:#fffdf8;border-radius:12px;padding:14px 10px;max-height:calc(100dvh - 210px);overflow:auto}
.mt-paper svg{display:block;width:100%;height:auto}
body.solo .mt-mini{position:fixed;z-index:310;left:50%;top:10px;transform:translateX(-50%);display:flex;align-items:center;gap:10px;height:46px;box-sizing:border-box;padding:4px;border-radius:999px;background:#1d1b18;border:1px solid #3a3630;box-shadow:0 14px 30px rgba(0,0,0,.55);color:var(--cream);font:800 13.5px/1 var(--body);max-width:calc(100vw - 24px)}
body.solo .mt-mini[hidden]{display:none}
.mt-mini button{display:grid;place-items:center;flex:none;width:36px;height:36px;padding:0;border-radius:50%;border:0;background:#2c2924;color:var(--cream);cursor:pointer}
.mt-mini button:hover{background:#3a3630}
.mt-mini .mt-mp{background:var(--yellow);color:#111}
.mt-mini .mt-mp:hover{background:#ffbb24}
.mt-vw{position:fixed;right:16px;bottom:16px;z-index:305;width:min(460px,calc(100vw - 32px));box-sizing:border-box;padding:8px;border-radius:16px;background:#1d1b18;border:1px solid #3a3630;box-shadow:0 18px 40px rgba(0,0,0,.6)}
.mt-vw[hidden]{display:none}
.mt-vw-h{display:flex;align-items:center;gap:8px;padding:2px 2px 8px 8px;color:var(--cream);font:800 13.5px/1 var(--body)}
.mt-vw-h>b{flex:1}
.mt-vw-s{display:inline-flex;padding:2px;border-radius:999px;background:#2c2924}
.mt-vw-s button{height:28px;padding:0 11px;border:0;border-radius:999px;background:none;color:#bfb6a4;font:800 12.5px/1 var(--body);cursor:pointer;white-space:nowrap}
.mt-vw-s button.on{background:var(--yellow);color:#111}
.mt-vw-x{width:28px;height:28px;border-radius:50%;border:0;background:#2c2924;color:var(--cream);font:800 16px/1 var(--body);cursor:pointer}
.mt-vw video{display:block;width:100%;max-height:60vh;border-radius:10px;background:#000;cursor:pointer}
.mt-vw-v{position:relative}
.mt-vw-big{position:absolute;left:50%;top:50%;translate:-50% -50%;width:64px;height:64px;border-radius:50%;border:0;padding:0 0 0 4px;display:grid;place-items:center;cursor:pointer;color:var(--black,#111);background:var(--yellow);box-shadow:0 8px 24px rgba(0,0,0,.55),0 0 0 6px color-mix(in srgb,var(--yellow) 25%,transparent)}
.mt-vw-big svg{width:30px;height:30px}.mt-vw-big:hover{transform:scale(1.06)}
.mt-vw-c{display:flex;align-items:center;gap:10px;padding:8px 4px 2px}
.mt-vw-pp{flex:none;width:38px;height:38px;border-radius:50%;border:0;padding:0;display:grid;place-items:center;cursor:pointer;color:var(--black,#111);background:var(--yellow)}
.mt-vw-sk{flex:1 1 auto;min-width:0;accent-color:var(--yellow);height:22px;cursor:pointer}
.mt-vw-t{flex:none;font:800 12.5px/1 var(--body,Nunito,sans-serif);color:#cfc6b4;font-variant-numeric:tabular-nums}
.mt-mini .mt-msp{width:auto;min-width:40px;padding:0 9px;border-radius:999px;font:800 13px/1 var(--body);font-variant-numeric:tabular-nums}
.mt-mini .mt-msp.on,.mt-spd.on{color:var(--yellow)}
.rt-sp{min-width:44px;justify-content:center;font-variant-numeric:tabular-nums}
.rt-sp.on{color:var(--yellow)}
.mt-mn{min-width:0;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mt-mbar{flex:none;width:120px;height:4px;border-radius:2px;background:#3a3630;overflow:hidden}
.mt-mbar b{display:block;height:100%;width:0;background:var(--yellow)}
.mt-mt{flex:none;font-variant-numeric:tabular-nums;color:#bdb4a2;white-space:nowrap}
.lcd-take[hidden],.lcd-pb[hidden]{display:none!important}
body.mt-pl #lcdKey,body.mt-pl .lcd-sus:not(.on){display:none}
.lcd-top .lcd-take{white-space:nowrap;font-variant-numeric:tabular-nums}
.lcd-pb{position:absolute;left:0;right:0;bottom:0;height:3px;z-index:4;background:currentColor;opacity:.75;transform-origin:left center;transform:scaleX(0);pointer-events:none}
@media (max-width:620px){
.mt-mbar{display:none}
.mt-mini .mt-mrw,.mt-mini .mt-mff{display:none}
body.solo .mt-mini{left:8px;right:8px;transform:none;max-width:none}
.mt-mn{flex:1 1 auto;max-width:none}
body.solo .kb-switches .mt-btn{flex:none!important}
.mt-r1{flex-wrap:wrap}.mt-meta{width:100%}
.mt-acts .mt-b{flex:1 1 calc(50% - 4px)}
.mt-st{margin-right:40px}
.mt-sh{flex-wrap:wrap}
}
/* ---- Library (switch: library): famous public-domain pieces from the Mutopia Project, played on the keys ---- */
html.ffo-library:where(:not(.fft-library)) .lib-btn,html.ffo-library:where(:not(.fft-library)) .mt-mnx,html.ffo-takes:where(:not(.fft-takes)) .lib-sh,html.ffo-record:where(:not(.fft-record)) .lib-sh,html.ffo-takes:where(:not(.fft-takes)) .mt-mini.lib .mt-mo,html.ffo-record:where(:not(.fft-record)) .mt-mini.lib .mt-mo{display:none!important}
.hc-card.lib-card{max-width:680px}
.lib-bar{display:flex;align-items:center;gap:8px;margin:0 0 10px}
.lib-q{flex:1 1 auto;min-width:0;height:42px;box-sizing:border-box;border-radius:12px;border:1px solid #3a3630;background:#1d1b18;color:var(--cream);font:800 15px var(--body);padding:0 14px;outline:0}
.lib-q:focus{border-color:var(--yellow)}
.lib-q::placeholder{color:#8a8170}
.lib-auto{flex:none;display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 14px;box-sizing:border-box;border-radius:12px;border:1px solid #3a3630;background:transparent;color:#bfb6a4;font:800 13.5px/1 var(--body);cursor:pointer;white-space:nowrap}
.lib-auto i{width:30px;height:18px;border-radius:999px;background:#3a3630;position:relative;flex:none;transition:background .15s}
.lib-auto i:after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#bfb6a4;transition:transform .15s,background .15s}
.lib-auto[aria-pressed="true"]{color:var(--cream)}
.lib-auto[aria-pressed="true"] i{background:var(--yellow)}
.lib-auto[aria-pressed="true"] i:after{transform:translateX(12px);background:#111}
.lib-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.lib-chip{height:30px;padding:0 12px;border-radius:999px;border:1px solid #3a3630;background:transparent;color:#bfb6a4;font:800 12.5px/1 var(--body);cursor:pointer}
.lib-chip.on{background:var(--yellow);border-color:var(--yellow);color:#111}
.lib-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;min-height:120px}
.lib-it{display:flex;align-items:center;gap:12px;padding:8px 10px 8px 8px;border-radius:14px;background:#11100e;border:1px solid #2e2b26}
.lib-it.cur{border-color:#6b5a2a;background:#1a1712}
.lib-pl{flex:none;display:grid;place-items:center;width:38px;height:38px;padding:0;border-radius:50%;border:0;background:#2c2924;color:var(--cream);cursor:pointer}
.lib-pl:hover{background:#3a3630}
.lib-it.cur .lib-pl{background:var(--yellow);color:#111}
.lib-tx{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px;text-align:left;background:none;border:0;padding:0;color:inherit;cursor:pointer}
.lib-tx b{font:800 15px/1.2 var(--body);color:var(--cream);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lib-tx small{font:700 12.5px/1.25 var(--body);color:#a9a091;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lib-tx small em{font-style:normal;color:#7d7566}
.lib-lv{flex:none;height:22px;padding:0 9px;border-radius:999px;background:#24211c;color:#cfc6b4;font:800 11.5px/22px var(--body);white-space:nowrap}
.lib-sh{flex:none;display:grid;place-items:center;width:34px;height:34px;padding:0;border-radius:50%;border:1px solid #3a3630;background:transparent;color:#bfb6a4;cursor:pointer}
.lib-sh:hover{color:var(--cream);border-color:#5a554c}
.lib-none{padding:26px 8px;text-align:center;font:700 14px/1.5 var(--body);color:#a9a091}
.lib-cr{margin:14px 0 0;font:700 12px/1.5 var(--body);color:#8a8170}
.lib-cr a{color:#cfc6b4}
.mt-mini .mt-mnx{display:none}
.mt-mini .mt-grip{flex:none;display:grid;place-items:center;width:14px;height:36px;margin:0 -4px 0 4px;color:#6f675a;cursor:grab;touch-action:none}
.mt-mini .mt-grip:hover{color:var(--cream)}.mt-mini.mt-drag,.mt-mini.mt-drag .mt-grip{cursor:grabbing}
.mt-mini.mt-drag{box-shadow:0 20px 44px rgba(0,0,0,.7);border-color:#5a554c}
.mt-mini .mt-mrw,.mt-mini .mt-mff,.mt-mini .mt-mpr,.mt-mini .mt-mnx{background:transparent}
.mt-mini .mt-mrw:hover,.mt-mini .mt-mff:hover,.mt-mini .mt-mpr:hover,.mt-mini .mt-mnx:hover{background:#2c2924}
.mt-mini{gap:6px!important}.mt-mini .mt-mn{margin-left:6px}
.mt-mbar{box-sizing:border-box;height:18px!important;padding:7px 0;background-clip:content-box!important;cursor:pointer;touch-action:none}
.mt-mbar b{border-radius:2px}
.mt-mbar:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}
.mt-mini.lib .mt-mnx{display:grid}
@media (max-width:620px){
.lib-bar{flex-wrap:wrap}.lib-q{flex:1 1 100%}.lib-auto{flex:1 1 calc(50% - 4px);justify-content:center}
.lib-lv{display:none}
}
/* ---- Layers (switch: layers) ---- */
html.ffo-layers:where(:not(.fft-layers)) .mix-lyr,html.ffo-layers:where(:not(.fft-layers)) .lyr-mxp{display:none!important}
.mix-lyr .lyr-type{position:relative}
.mix-lyr .lyr-pick{display:inline-flex;align-items:center;gap:6px;max-width:190px}.mix-lyr .lyr-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mix-lyr .lyr-st{width:300px;max-height:min(62vh,540px);overflow-y:auto;overscroll-behavior:contain}
.lyr-st .lst-g{display:block;margin:10px 4px 4px;font:800 10.5px/1 var(--body);font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--yellow)}.lyr-st .lst-g:first-child{margin-top:2px}
.lm-sec{margin:12px 2px 6px;font:800 11px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--yellow)}.lm-sec:first-of-type{margin-top:4px}
.lyr-hw{display:flex;flex-direction:column;align-items:center;gap:6px;justify-content:center}
.lyr-hold,.lyr-mx{height:28px;min-width:64px;padding:0 12px;border-radius:999px;border:1px solid #3a3630;background:#1d1b18;color:#cfc6b4;font:800 12px/1 var(--body);letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.lyr-hold[aria-pressed="true"]{background:var(--yellow);border-color:var(--yellow);color:var(--black,#111);box-shadow:0 0 10px color-mix(in srgb,var(--yellow) 40%,transparent)}
.lyr-hold:hover,.lyr-mx:hover{border-color:#5a5448;color:var(--cream)}
.hc-card.lyr-card{max-width:min(1060px,calc(100vw - 32px))}
.lm-row{display:grid;grid-template-columns:repeat(7,minmax(118px,1fr));gap:8px;overflow-x:auto;padding-bottom:6px}
.lm-s{display:flex;flex-direction:column;gap:8px;padding:10px;border-radius:14px;background:#11100e;border:1px solid #2e2b26;border-top:3px solid var(--lc);min-width:0}
.lm-s.off{opacity:.55}.lm-s.dim .lm-f{opacity:.4}
.lm-h{display:grid;grid-template-columns:22px 1fr;column-gap:8px;align-items:center}.lm-h b{font:800 13px/1.15 var(--body);color:var(--cream);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lm-h small{grid-column:2;font:800 10px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--lc)}
.lm-on{grid-row:span 2;width:22px;height:22px;border-radius:50%;border:1px solid #3a3630;background:#1d1b18;display:grid;place-items:center;cursor:pointer;padding:0}
.lm-on i{width:9px;height:9px;border-radius:50%;background:#3a3630}.lm-on[aria-pressed="true"] i{background:var(--lc);box-shadow:0 0 8px var(--lc)}
.lm-r{display:grid;grid-template-columns:40px 1fr 30px;align-items:center;gap:4px;font:800 9.5px/1 var(--body);letter-spacing:.04em;text-transform:uppercase;color:#8a8170}
.lm-r input{width:100%;accent-color:var(--lc);min-width:0}.lm-r em,.lm-f em{font:800 11.5px/1 var(--body);font-style:normal;color:#cfc6b4;text-align:center;font-variant-numeric:tabular-nums}
.lm-pm{grid-template-columns:40px 24px 1fr 24px}.lm-pm button{height:24px;border-radius:7px;border:1px solid #3a3630;background:#1d1b18;color:var(--cream);font:800 14px/1 var(--body);cursor:pointer;padding:0}.lm-pm button:disabled{opacity:.3;cursor:default}
.lm-msh{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}.lm-msh button{height:26px;border-radius:7px;border:1px solid #3a3630;background:#1d1b18;color:#a89f8c;font:800 12px/1 var(--body);cursor:pointer}
.lm-msh button[data-a="m"][aria-pressed="true"]{background:#c0392b;border-color:#c0392b;color:#fff}.lm-msh button[data-a="s"][aria-pressed="true"]{background:#e6c34a;border-color:#e6c34a;color:#111}.lm-msh button[data-a="h"][aria-pressed="true"]{background:var(--lc);border-color:var(--lc);color:#111}
.lm-f{display:flex;flex-direction:column;align-items:center;gap:6px}.lm-f input{writing-mode:vertical-lr;direction:rtl;width:28px;height:120px;accent-color:var(--lc)}
.lm-g{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));justify-items:center;gap:8px;margin:12px 0 4px;padding:10px;border-radius:14px;background:#11100e;border:1px solid #2e2b26}
.lm-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px;font:700 12.5px/1.45 var(--body);color:#8a8170}
@media (max-width:620px){.lm-row{grid-template-columns:repeat(7,150px)}.lm-g{grid-template-columns:repeat(2,minmax(0,1fr))}.lm-foot{flex-direction:column;align-items:stretch}}
body.hc-open{overflow:hidden}
.hc-card{position:relative;width:100%;max-width:620px;max-height:calc(100dvh - 32px);overflow:auto;box-sizing:border-box;background:linear-gradient(180deg,#24211c,#181613);color:var(--cream);border:1px solid #3a3630;border-top:4px solid var(--yellow);border-radius:20px;padding:22px 22px 20px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.hc-x{position:absolute;top:12px;right:12px;width:36px;height:36px;border-radius:50%;border:0;background:#2c2924;color:var(--cream);font:700 22px/1 var(--body);cursor:pointer}
.hc-x:hover{background:#3a3630}
.hc-h{display:flex;gap:14px;align-items:center;margin:0 44px 16px 0}
.hc-bulb{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--yellow);color:#111}
.hc-bulb svg{width:24px;height:24px}
.hc-h h2{margin:0;font:600 24px/1.1 var(--display);color:var(--cream)}
.hc-h p{margin:4px 0 0;font-size:14.5px;color:#bdb4a2}
.hc-tabs{display:flex;gap:4px;padding:4px;background:#11100e;border:1px solid #2e2b26;border-radius:999px;margin-bottom:16px}
.hc-tabs button{flex:1 1 0;min-width:0;height:36px;border:0;border-radius:999px;background:none;color:#cfc6b4;font:800 13.5px var(--body);cursor:pointer;white-space:nowrap}
.hc-tabs button[aria-selected="true"]{background:var(--yellow);color:#111}
.hc-step{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin:14px 0 8px;font:800 15.5px/1.35 var(--body);color:var(--cream)}
.hc-step:first-child{margin-top:0}
.hc-step b{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--yellow);color:#111;font:900 13px var(--body)}
.hc-step em{font-style:normal;color:var(--yellow)}
.hc-step span{flex-basis:100%;padding-left:34px;font-weight:600;font-size:14px;color:#bdb4a2}
.hc-ports{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.hc-port{background:#11100e;border:1px solid #2e2b26;border-radius:14px;padding:12px 12px 13px;text-align:center}
.hc-port svg{width:44px;height:44px;color:var(--yellow);display:block;margin:0 auto 6px}
.hc-port h3,.hc-row h3{margin:0;font:600 16px/1.2 var(--display);color:var(--cream)}
.hc-port small{display:block;font-size:12px;color:#9a917f;margin:2px 0 6px}
.hc-port p,.hc-row p{margin:0;font-size:13.5px;line-height:1.45;color:#cfc6b4}
.hc-port p b,.hc-row p b,.hc-fix b{color:var(--cream)}
.hc-row{display:flex;gap:14px;align-items:flex-start;background:#11100e;border:1px solid #2e2b26;border-radius:14px;padding:12px 14px;margin-bottom:10px}
.hc-row svg{flex:none;width:40px;height:40px;color:var(--yellow)}
.hc-row h3{margin-bottom:3px}
.hc-fix{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.hc-fix li{background:#11100e;border:1px solid #2e2b26;border-radius:12px;padding:11px 14px;font-size:14px;line-height:1.45;color:#cfc6b4}
.hc-fix li>b:first-child{display:block;color:var(--yellow);font-size:14.5px;margin-bottom:2px}
.hc-fix a{color:var(--yellow);font-weight:800}
@media (max-width:620px){.hc{padding:10px;place-items:end center}.hc-card{padding:18px 16px 16px;border-radius:18px;max-height:calc(100dvh - 20px)}.hc-ports{grid-template-columns:1fr}.hc-port{display:grid;grid-template-columns:44px 1fr;column-gap:12px;text-align:left;align-items:center}.hc-port svg{grid-row:1/4;margin:0}.hc-port small{margin:0 0 4px}.hc-tabs button{font-size:12.5px}.hc-h h2{font-size:21px}}
/* ---- ch1: bottom bar sits a little lower, the keys cast a soft shadow onto it, and the case has more weight underneath ---- */
@media (min-width:621px){
body.solo .kb-tools{margin-top:22px!important;margin-bottom:4px!important}
body.solo .kb-wrap{padding-bottom:26px!important}
body.solo .kb{box-shadow:0 14px 18px -10px rgba(0,0,0,.75),0 4px 6px -3px rgba(0,0,0,.6)}
}
body.solo .kb-wrap{box-shadow:0 40px 80px -20px rgba(0,0,0,.8),0 22px 26px -14px rgba(0,0,0,.85),0 0 0 1px #2c2a26,inset 0 1px 0 rgba(255,255,255,.07),inset 0 -14px 22px -12px rgba(0,0,0,.65)!important}
/* ---- ch1 full screen: just the rig. The header and footer go; Esc brings them back ---- */
body.solo.fs-on #nav,body.solo.fs-on .solo-made{display:none!important}
body.solo.fs-on main,body.solo.fs-on .piano-page,body.solo.fs-on .hero{padding-top:0!important}
body.solo.fs-on .kb-wrap{margin-top:66px!important}
html body.solo.fs-on:not(.mob) .hero .wrap>.kb-wrap{margin-top:104px!important}
html body.solo.fs-on:not(.mob) .fs-brand{height:74px!important;align-items:center!important;padding-bottom:0!important} /* the ch1 mark centred above the switches, with room on both sides */ /* full screen: room for the ch1 mark, then the position and power switches, then the case */
/* full screen keeps the ch1 mark on top, where the header had it */
body.solo .fs-brand{display:none}
body.solo.fs-on .fs-brand{display:flex;position:absolute;top:0;left:0;right:0;height:var(--fsgap,66px);box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:15px;align-items:flex-end;justify-content:center;pointer-events:none;z-index:0;animation:fsBrand .6s cubic-bezier(.2,.8,.2,1) both}
/* pressed into the page: a fill a touch darker than the background, a faint lit lower edge and a shadowed upper edge, so it reads as engraved, never bright */
body.solo.fs-on .fs-brand .ch1t{font-size:34px;line-height:1;color:rgba(255,255,255,.10);position:relative;top:0;text-shadow:0 1px 0 rgba(255,255,255,.12),0 -1px 0 rgba(0,0,0,.75),0 0 1px rgba(0,0,0,.4)}
@media (max-width:520px){body.solo.fs-on .fs-brand .ch1t{font-size:28px}}
body.solo.fs-on .fs-brand .ch1t .ch1g{filter:drop-shadow(0 1px 0 rgba(255,255,255,.12)) drop-shadow(0 -1px 0 rgba(0,0,0,.75))}
body.solo.fs-on .fs-exit{top:calc(12px + env(safe-area-inset-top,0px))!important}
@keyframes fsBrand{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){body.solo.fs-on .fs-brand{animation:none}}
/* leaving full screen: the header glides back down from the top, its pieces settle in one after another, and the piano eases down to make room (no jump) */
body.solo.fs-in main,body.solo.fs-in .piano-page,body.solo.fs-in .hero{transition:padding-top .8s cubic-bezier(.16,1,.3,1)!important}
body.solo.fs-in .kb-wrap{transition:margin-top .8s cubic-bezier(.16,1,.3,1)!important}
body.solo.fs-in #nav{animation:fsNavIn .85s cubic-bezier(.16,1,.3,1) both}
body.solo.fs-in #nav .wrap>*{animation:fsNavBit .7s cubic-bezier(.16,1,.3,1) both}
body.solo.fs-in #nav .wrap>*:nth-child(1){animation-delay:.12s}
body.solo.fs-in #nav .wrap>*:nth-child(2){animation-delay:.19s}
body.solo.fs-in #nav .wrap>*:nth-child(3){animation-delay:.26s}
body.solo.fs-in #nav .wrap>*:nth-child(n+4){animation-delay:.33s}
body.solo.fs-in .solo-made{animation:fsNavBit .9s .35s cubic-bezier(.16,1,.3,1) both}
@keyframes fsNavIn{from{opacity:0;transform:translateY(-120%);filter:blur(8px)}55%{opacity:1;filter:blur(0)}to{opacity:1;transform:none;filter:none}}
@keyframes fsNavBit{from{opacity:0;translate:0 -10px}to{opacity:1;translate:none}}
@media (prefers-reduced-motion:reduce){body.solo.fs-in #nav,body.solo.fs-in #nav .wrap>*,body.solo.fs-in .solo-made{animation-duration:.01s!important;animation-delay:0s!important}}
/* ---- ch1 chord screen: no black bezel, the screen itself is the module, as tall as Piano / Pad / Synth ---- */
@media (min-width:1241px){
body.solo .rig-panel .kb-side{background:none!important;box-shadow:none!important;padding:0!important;align-self:stretch!important;grid-template-rows:auto minmax(0,1fr)!important}
body.solo.midi-live .rig-panel .kb-side{grid-template-rows:minmax(0,1fr)!important}
body.solo .rig-panel .kb-side .lcd{align-self:stretch!important;height:auto!important;display:flex!important;flex-direction:column;justify-content:center}
}
body.solo .rig-panel .kb-side{background:none!important;box-shadow:none!important;padding:0!important}
body.solo .rig-panel .lcd{border-radius:12px!important;box-shadow:inset 0 0 0 1px #6a4c0e,inset 0 0 18px rgba(0,0,0,.55)!important}
/* touch glow: stronger, and the glass brightens a touch with harder playing */
body.solo.tm-on .rig-panel .lcd{box-shadow:inset 0 0 0 1px #6a4c0e,inset 0 0 18px rgba(0,0,0,.55)!important}
body.solo.tm-on .rig-panel .lcd-tmg{box-shadow:inset 0 0 0 3px #F6A801,inset 0 0 30px rgba(255,190,60,.28),0 0 40px 0 rgba(246,168,1,.8)}
/* chord screen footer: ch one, the ID and the web address share one baseline and one letter height */
body.solo .lcd-wm .ch1t{font-size:11px!important}
body.solo .lcd-wm .lcd-id{font-size:13.5px!important;letter-spacing:.04em!important;position:relative;top:0}
body.solo .lcd-wm small{font-size:11px!important;letter-spacing:.02em!important}
body.solo .lcd-wm.t1 .ch1t,body.solo .lcd-wm.t1 small{font-size:10.4px!important}body.solo .lcd-wm.t1 .lcd-id{font-size:12.6px!important;letter-spacing:.01em!important;top:0}body.solo .lcd-wm.t1 small{letter-spacing:0!important}
body.solo .lcd-wm.t2 .ch1t,body.solo .lcd-wm.t2 small,body.solo .lcd-wm.t3 .ch1t,body.solo .lcd-wm.t3 small{font-size:9.6px!important;letter-spacing:0!important}body.solo .lcd-wm.t2 .lcd-id,body.solo .lcd-wm.t3 .lcd-id{font-size:10.5px!important;letter-spacing:0!important}
/* ---- pedal light ---- */
@property --sg{syntax:'';inherits:true;initial-value:0}
@keyframes susFade{from{--sg:.8}to{--sg:.16}} /* let go with the pedal down: steps to 80%, then fades like the note */
body.solo.sl-on #kb .sus-glow:not(.on){transition:box-shadow .5s ease-out}
body.solo.sl-on #kb .kw.sus-glow:not(.on){background:color-mix(in srgb,var(--kl) calc(var(--sg) * 100%),#f6f2e9)!important;animation:susFade 3.4s cubic-bezier(.25,.1,.35,1) forwards}
body.solo.sl-on #kb .kb-black.sus-glow:not(.on){background:color-mix(in srgb,var(--kl) calc(var(--sg) * 82%),#1c1a18)!important;animation:susFade 3.4s cubic-bezier(.25,.1,.35,1) forwards}
body.solo.sl-on #kb .sus-glow.sus-end:not(.on){animation:none!important;transition:--sg .3s ease-out}
html.ffo-suslight:where(:not(.fft-suslight)) .adv-sl{display:none!important}
/* weighted keys: the front edge glows and fades with the key, a little deeper in tone like a lit key's edge */
html body.solo.wt-on.sl-on #kb .kw.sus-glow:not(.on)::before{background:linear-gradient(180deg,rgba(0,0,0,0) 0,rgba(60,45,25,.1) 2px,color-mix(in srgb,var(--kl) calc(var(--sg) * 100%),#efe9dd) 5px,color-mix(in srgb,color-mix(in srgb,var(--kl) 78%,#5a3a00) calc(var(--sg) * 100%),#cdc3b1) 100%)!important}
/* ---- chord trail ---- */
.ctr{display:none}
body.solo.ctr-on .ctr,body.solo.ctr-key-only .ctr{display:flex;align-items:center;gap:8px;height:40px;margin:0 0 12px;padding:0 6px 0 12px;box-sizing:border-box;border-radius:10px;background:linear-gradient(180deg,#151412,#1b1a17);border:1px solid #2c2a26;box-shadow:inset 0 1px 3px rgba(0,0,0,.6)}
body.solo.ctr-key-only:not(.ctr-on) .ctr{background:none;border-color:transparent;box-shadow:none;justify-content:flex-end}
body.solo.ctr-key-only:not(.ctr-on) .ctr>:not(.ctr-key){display:none}
.ctr-l{flex:none;font:900 9.5px/1 var(--body);letter-spacing:.18em;text-transform:uppercase;color:#7d7566;white-space:nowrap}
.ctr-l:empty{display:none}
.ctr-l.lp{color:var(--yellow);letter-spacing:.06em;text-transform:none;font-size:11px}
/* folded trail: only the Chords | Notes tabs stay, small and quiet, to bring it back */
body.solo.ctr-on .ctr.ctr-min{width:max-content;height:30px;margin-bottom:8px;padding:0;background:none;border-color:transparent;box-shadow:none}
body.solo .ctr.ctr-min>:not(.ctr-mode){display:none!important}
body.solo .ctr.ctr-min .ctr-mode{opacity:.6;transition:opacity .15s}body.solo .ctr.ctr-min .ctr-mode:hover{opacity:1}
body.solo .ctr.ctr-min .ctr-mode [aria-checked="true"]{background:transparent!important;color:inherit!important}
.ctr-list{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:4px;overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 22px);mask-image:linear-gradient(90deg,transparent,#000 22px);padding-left:14px}
.ctr-list::-webkit-scrollbar{display:none}
/* the chips scroll inside the bar and never spill past it: no vertical scroll, everything outside the list is clipped, both ends fade */
.ctr-list{overflow-y:hidden!important;overscroll-behavior-x:contain;clip-path:inset(0 round 7px);align-self:stretch;-webkit-mask-image:linear-gradient(90deg,transparent,#000 22px,#000 calc(100% - 10px),transparent);mask-image:linear-gradient(90deg,transparent,#000 22px,#000 calc(100% - 10px),transparent)}
body.solo.ctr-on .ctr{overflow:hidden}
.ctr-empty{font:700 12px/1 var(--body);color:#6f685c;white-space:nowrap}
.ctr-c{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:44px;height:32px;padding:0 9px;box-sizing:border-box;border-radius:7px;color:#cfc6b4;background:#22201c}
.ctr-c b{font:800 13px/1 'Exo 2',var(--body);letter-spacing:.01em;white-space:nowrap}
.ctr-c small{font:700 9px/1 var(--body);color:#857c6b;white-space:nowrap;letter-spacing:.02em}
.ctr-c.now{background:#2e2717;color:var(--yellow);box-shadow:inset 0 0 0 1px #6b5320}
.ctr-c{position:relative}
.ctr-c.man{box-shadow:inset 0 0 0 1px #4a4335;background:#1d1b18}
.ctr-c.man small{color:#9a8f7a;font-style:italic}
.ctr-x,.ctr-ins{position:absolute;z-index:3;display:none;place-items:center;width:15px;height:15px;padding:0;border:0;border-radius:50%;font:900 11px/1 var(--body);cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.6)}
.ctr-x{top:1px;right:1px;background:#3a3630;color:#e9e2d3}
.ctr-x:hover{background:#b3261e;color:#fff}
.ctr-ins{left:-10px;top:50%;margin-top:-7.5px;background:var(--yellow);color:#111}
.ctr-ins.ctr-end{position:static;display:none;flex:none;margin:0 4px 0 2px}
@media (hover:hover){.ctr-c:hover>.ctr-x,.ctr-c:hover>.ctr-ins{display:grid}.ctr-list:hover>.ctr-end{display:grid}}
.ctr.ctr-edit .ctr-x,.ctr.ctr-edit .ctr-ins{display:grid}
.ctr.ctr-edit .ctr-c{margin-left:8px}
.ctr-ed[aria-pressed="true"]{color:var(--yellow);background:#2e2717}
.ctr-c.ctr-new{padding:0 4px;box-shadow:inset 0 0 0 1px var(--yellow)}
.ctr-new input{width:76px;height:24px;box-sizing:border-box;border:0;outline:0;background:transparent;color:var(--cream);font:800 13px 'Exo 2',var(--body);text-align:center}
.ctr-new input::placeholder{color:#6b6355}
.ctr-c.now small{color:#b49a5c}
.rs-key .rs-sug{flex:none;max-width:0;opacity:0;margin:0;padding:0;border-width:0;overflow:hidden;pointer-events:none;transition:max-width .45s cubic-bezier(.2,.8,.2,1),opacity .3s ease,margin .45s ease,padding .45s ease;animation:none}
body.solo .rs-key .rs-sug{height:26px;gap:6px;font-size:11.5px}
body.solo .rs-key .rs-sug.on{max-width:220px;opacity:.82;margin:0 0 0 4px;padding:0 4px 0 12px;border-width:1px;pointer-events:auto}
body.solo .rs-key .rs-sug span{height:20px;padding:0 8px;font-size:11px}
body.solo .rs-key .rs-sug.on:hover{opacity:1}
@media (prefers-reduced-motion:reduce){.rs-key .rs-sug{transition:none}}
.ctr-tg{display:none}
body.solo #kbTools .ctr-tg{display:inline-flex;gap:8px;padding:0 16px 0 13px}
body.solo #kbTools .ctr-tg svg{color:#8a8172;transition:color .15s}
body.solo #kbTools .ctr-tg[aria-pressed="true"]{border-color:#6b5320;background:#231d10}
body.solo #kbTools .ctr-tg[aria-pressed="true"] svg{color:var(--yellow)}
html.ffo-chordtrail:where(:not(.fft-chordtrail)) .ctr-tg{display:none!important}
@media (max-width:620px){body.solo #kbTools .ctr-tg{order:4;width:44px;flex:none;padding:0;justify-content:center}body.solo #kbTools .ctr-tg>span{display:none}
html:not(.ffo-chordtrail:where(:not(.fft-chordtrail))) body.solo #kbTools .lp{flex:1 1 0}}
.ctr-key{flex:none;display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 4px 0 12px;border-radius:999px;border:1px solid #6b5320;background:#231d10;color:#d9cfbd;font:700 12px/1 var(--body);cursor:pointer;white-space:nowrap;animation:ctrIn .35s ease-out}
.ctr-key b{color:var(--yellow);font-weight:900}
.ctr-key span{display:inline-flex;align-items:center;height:20px;padding:0 9px;border-radius:999px;background:var(--yellow);color:#111;font-weight:900;font-size:11.5px}
.ctr-key[hidden]{display:none}
@keyframes ctrIn{from{opacity:0;transform:translateY(3px)}}
.ctr-b{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:8px;border:0;background:transparent;color:#8a8170;cursor:pointer}
.ctr-b:hover,.ctr-b:focus-visible{color:var(--cream);background:#26231e;outline:none}
.ctr-b.ok{color:var(--yellow)}
html.ffo-chordtrail:where(:not(.fft-chordtrail)) .adv-ct,html.ffo-autoroot:where(:not(.fft-autoroot)) .adv-ar{display:none!important}
@media (max-width:620px){body.solo.ctr-on .ctr{height:38px;padding-left:10px}.ctr-l{display:none}.ctr-list{padding-left:0;-webkit-mask-image:none;mask-image:none}.ctr-key{font-size:11.5px}}
/* ---- Numbers (switch: numbers): chords as numbers in your key, in a band above the keys ---- */
.nmb{display:none}
html:not(.ffo-numbers:where(:not(.fft-numbers))) body.solo.nmb-on .nmb{contain:layout paint style;display:flex;align-items:stretch;gap:12px;margin:0 0 12px;padding:8px 8px 8px 12px;box-sizing:border-box;border-radius:14px;background:linear-gradient(180deg,#151412,#1b1a17);border:1px solid #2c2a26;box-shadow:inset 0 1px 3px rgba(0,0,0,.6);font-family:var(--body);color:var(--cream)}
.nmb-top{flex:none;width:96px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:6px}
.nmb-lab{font:900 9.5px/1 var(--body);letter-spacing:.18em;text-transform:uppercase;color:#a99f8e}
.nmb-key{height:28px;padding:0 9px;border-radius:8px;border:0;background:#1f1503;box-shadow:inset 0 0 0 1px #5a400a;font:22px/28px 'VT323',monospace;color:#ffc93d;letter-spacing:.04em;cursor:pointer;white-space:nowrap}
.nmb-md{height:24px;padding:0 9px;border-radius:999px;border:1px solid #3a3630;background:#262420;color:#cfc6b4;font:800 11px/1 var(--body);cursor:pointer;white-space:nowrap}
.nmb-md.g{color:var(--kl,#F6A801);border-color:#6b5317;background:#2a2009}
:is(.nmb-key,.nmb-md):focus-visible{outline:2px solid var(--yellow);outline-offset:2px}
.nmb-mid{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:6px}
.nmb-cells{display:grid;grid-template-columns:repeat(var(--nmn,6),minmax(0,1fr));gap:6px}
.nmb-c{position:relative;min-width:0;height:70px;padding:0;box-sizing:border-box;border-radius:11px;border:1px solid #2c2a26;background:#1d1b18;color:#8a8170;font-family:var(--body);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px}
button.nmb-c{cursor:pointer}
.nmb-c b{font:700 32px/1 var(--display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.nmb-c small{display:none;font:800 12px/1 var(--body);color:#7d766a;white-space:nowrap}
body.nmb-both .nmb-c small{display:block}
.nmb-c.a1{color:#e8e0cf}.nmb-c.a2{color:#bfb6a4}.nmb-c.a3{color:#a99f8e}.nmb-c.a4,.nmb-c.a5{color:#7d766a}
.nmb-blank{border-style:dashed;border-color:#24221f;background:transparent}
.nmb-c.now{color:var(--kl,#F6A801);background:#2a2009;border-color:#8a6512}
.nmb-c.now b{font-size:40px;text-shadow:0 0 18px rgba(246,168,1,.45)}
.nmb-c.now small{color:var(--kl,#F6A801)}
.nmb-c.nx{color:var(--cream);border:2px dashed var(--kl,#F6A801)}
.nmb-c i{position:absolute;top:-8px;left:50%;transform:translateX(-50%);height:16px;padding:0 7px;border-radius:999px;background:var(--kl,#F6A801);color:#111;font:900 9px/16px var(--body);font-style:normal;letter-spacing:.1em;text-transform:uppercase}
.nmb.ok .nmb-c.now,.nmb.ok .nmb-c.a1{animation:nmOk .45s ease-out}
@keyframes nmOk{from{box-shadow:0 0 0 3px rgba(61,220,132,.7)}to{box-shadow:0 0 0 0 rgba(61,220,132,0)}}
.nmb-empty{grid-column:1/-1;height:70px;display:flex;align-items:center;justify-content:center;font:700 13px/1.3 var(--body);color:#8a8170;text-align:center}
.nmb-dots{display:flex;gap:4px}.nmb-dots:empty{display:none}
.nmb-dots i{flex:1;height:4px;border-radius:2px;background:#2c2a26}.nmb-dots i.on{background:var(--kl,#F6A801)}
/* the chord to play now lights its keys (a beat early when the metronome runs) */
body.solo #kb .kw.nm-g:not(.on):not(#_x){background:linear-gradient(180deg,#fffaf0 35%,#ffd978 100%)!important;box-shadow:inset 0 0 0 3px var(--yellow),inset 0 -6px 0 var(--yellow)!important;animation:sgNx .5s ease-in-out infinite alternate}
body.solo #kb .kb-black.nm-g:not(.on):not(#_x){background:linear-gradient(180deg,#2a2009 30%,#c98a00 100%)!important;box-shadow:inset 0 0 0 2.5px var(--yellow),inset 0 -5px 0 var(--yellow)!important;animation:sgNx .5s ease-in-out infinite alternate}
@media (prefers-reduced-motion:reduce){#kb .nm-g,.nmb.ok .nmb-c{animation:none}}
html.ffo-numbers:where(:not(.fft-numbers)) .adv-nm{display:none!important}
/* the sheet */
.nm-card{width:380px;max-height:calc(100vh - 90px);overflow:auto;padding:14px 16px 16px}
.nm-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}.nm-h b{font:700 20px/1 var(--display);color:var(--kl,#F6A801)}
.nm-sec{display:block;margin:12px 0 7px;font:900 10px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:#a99f8e}
.nm-seg{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:3px;padding:3px;border-radius:12px;background:#0f0e0d;border:1px solid #2c2a26}
.nm-seg button{min-height:36px;padding:6px 4px;border:0;border-radius:9px;background:transparent;color:#cfc6b4;font:800 13px/1.15 var(--body);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.nm-seg button small{font:700 11px/1.2 var(--body);color:#7d766a}
.nm-seg button[aria-checked="true"]{background:#2a2009;color:var(--kl,#F6A801);box-shadow:inset 0 0 0 1px #8a6512}
.nm-seg button[aria-checked="true"] small{color:#cfc6b4}
.nm-row{display:flex;align-items:center;justify-content:space-between;margin-top:12px}.nm-row .nm-sec{margin:0}
.nm-ks{display:inline-flex;align-items:center;gap:2px;height:32px;padding:0 3px;border-radius:999px;border:1px solid #3a3630;background:#262420}
.nm-ks button{width:26px;height:26px;border:0;border-radius:50%;background:none;color:#bfb6a4;font:800 17px/1 var(--body);cursor:pointer}
.nm-ks b{height:24px;padding:0 8px;border-radius:7px;background:#1f1503;box-shadow:inset 0 0 0 1px #5a400a;font:400 19px/24px 'VT323',monospace;color:#ffc93d}
.nm-loop{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:8px}
.nm-loop button,.nm-pal button{min-width:0;border-radius:11px;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-family:var(--body)}
.nm-loop button{height:56px;border:1px solid #6b5317;background:#241b08;color:var(--kl,#F6A801)}
.nm-loop button b{font:700 24px/1 var(--display)}.nm-loop button small,.nm-pal button small{font:800 10.5px/1 var(--body);color:#bfb6a4}
.nm-add{height:56px;border-radius:11px;border:1px dashed #5a400a;display:flex;align-items:center;justify-content:center;color:#8a6512;font:700 22px/1 var(--display)}
.nm-pal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}
.nm-pal button{height:46px;border:1px solid #34312b;background:#1d1b18;color:var(--cream)}
.nm-pal button b{font:700 17px/1 var(--display)}
:is(.nm-loop,.nm-pal) button:hover{border-color:#8a6512}
.nm-quick{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:10px}
.nm-quick span{font:800 11.5px/1 var(--body);color:#8a8170;margin-right:2px}
.nm-quick button{height:28px;padding:0 10px;border-radius:999px;border:1px solid #34312b;background:#1d1b18;color:#cfc6b4;font:800 12px/1 var(--body);cursor:pointer}
.nm-quick button:hover{border-color:#6b6458}
.nm-hint{margin:8px 0 0;font:700 12px/1.45 var(--body);color:#8a8170}
/* phones: the band sits right above the keys, its key and mode on one line */
body.solo.mob .kb-wrap>.nmb{order:5!important}
html:not(.ffo-numbers:where(:not(.fft-numbers))) body.solo.mob.nmb-on .nmb{flex-direction:column;gap:6px;margin:0;padding:7px 8px 8px}
body.solo.mob .nmb-top{width:auto;flex-direction:row;align-items:center;gap:8px}
body.solo.mob .nmb-key{height:24px;font-size:19px;line-height:24px;padding:0 7px}
body.solo.mob .nmb-md{margin-left:auto}
body.solo.mob .nmb-c{height:56px}body.solo.mob .nmb-c b{font-size:26px}body.solo.mob .nmb-c.now b{font-size:32px}
body.solo.mob .nmb-c small{font-size:11px}
body.solo.mob .nmb-empty{height:56px}
body.solo.mob.mob-short .nmb-c{height:46px}body.solo.mob.mob-short .nmb-c small{display:none}
body.solo.mob .nm-card{width:auto;max-height:calc(100dvh - 160px)}
.nmb-fs{width:24px;height:24px;padding:0;border-radius:7px;border:1px solid #3a3630;background:#262420;color:#cfc6b4;display:grid;place-items:center;cursor:pointer}
.nmb-fs:hover{color:var(--kl,#F6A801);border-color:#6b5317}
.nmb-fs:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}
body.solo:not(.mob) .nmb-top{display:grid;grid-template-columns:auto auto;align-content:center;justify-items:start;gap:6px}
body.solo:not(.mob) .nmb-lab,body.solo:not(.mob) .nmb-key{grid-column:1/-1}
.nm-fsb{margin-top:14px}
/* full screen: for a TV or a projector */
.nmf{position:fixed;inset:0;z-index:400;display:flex;flex-direction:column;box-sizing:border-box;padding:2.2vmin 3vmin 1.6vmin;background:radial-gradient(120% 80% at 50% 0,#211c14 0,#0f0e0d 60%);color:var(--cream);font-family:var(--body);overflow:hidden}
.nmf[hidden]{display:none}
body.nmf-open{overflow:hidden}
body.nmf-open .nm-card{z-index:410}
/* ---- cross-device tidy (UX pass) ---- */
/* tablets and small laptops: the ch1 title sits beside the logo instead of under the right-hand buttons */
/* the ch1 title stays dead centre in the header whenever it fits with clear space either side; only when the buttons would touch it
does it step into the middle of the free space between the logo and the buttons (fitTitle, below) */
body.solo .solo-title.st-gap{position:static;transform:none;margin:0 auto!important}
/* tablets and small laptops: Setup is a round icon like the tuner and full screen beside it, so the title keeps the centre */
@media (min-width:621px) and (max-width:1180px){body.solo:not(.mob) .qs-nav{width:44px;height:44px;padding:0;justify-content:center;gap:0}body.solo:not(.mob) .qs-nav>span{display:none}}
/* tablets: a panel alone on its row keeps a normal width instead of stretching its knobs across the rig */
@media (min-width:621px) and (max-width:1100px){html body.solo:not(.mob) .rig-panel #mixPanel>.mix-strip:not(.ms-col){max-width:calc(50% - 6px)}}
/* touch screens: small buttons get a bigger invisible hit area (the look stays the same) */
@media (pointer:coarse){
:is(.sh-b,.rs-b,.ms-min,.nmb-fs,.bm-row button,.pn-x,.ms-col-b){position:relative}
:is(.sh-b,.rs-b,.ms-min,.nmb-fs,.bm-row button,.pn-x)::after{content:"";position:absolute;inset:-7px}
.nmb-key,.nmb-md{height:32px}.nmb-fs{width:32px;height:32px}
body.solo.mob .nmb-key{height:30px;line-height:30px}
}
/* short screens (a phone on its side, a small laptop): a slimmer Numbers band, so the keys keep their height */
@media (max-height:560px){
html:not(.ffo-numbers:where(:not(.fft-numbers))) body.solo.nmb-on .nmb{padding:5px 6px 5px 10px;margin-bottom:8px}
.nmb-c{height:48px}.nmb-c b{font-size:24px}.nmb-c.now b{font-size:28px}body.nmb-both .nmb-c small{display:none}.nmb-empty{height:48px}
.nmb-lab{display:none}
body.solo:not(.mob) .nmb-top{display:flex!important;flex-direction:row;align-items:center;width:auto;gap:6px}
html:not(.ffo-numbers:where(:not(.fft-numbers))) body.solo.nmb-on .nmb{align-items:center}
}
body.nmf-open .fs-exit{display:none!important}
body.solo.big-scr .hero{min-height:0!important}
.nmf-top{flex:none;display:flex;align-items:center;gap:2vmin;font:800 clamp(14px,2.2vmin,26px)/1 var(--body);color:#a99f8e}
.nmf-brand{display:inline-flex;align-items:baseline;gap:.5em;color:var(--cream)}.nmf-brand i{font:italic 800 1.35em/1 'Exo 2',var(--display);color:var(--kl,#F6A801)}
.nmf-key{padding:.35em .6em;border-radius:.5em;background:#1f1503;box-shadow:inset 0 0 0 1px #5a400a;font:400 1.5em/1 'VT323',monospace;color:#ffc93d}
.nmf-md{padding:.4em .8em;border-radius:999px;border:1px solid #3a3630;color:#cfc6b4}
.nmf-sp{flex:1}
.nmf-b{height:clamp(36px,5vmin,52px);min-width:clamp(36px,5vmin,52px);padding:0 1em;border-radius:999px;border:1px solid #3a3630;background:#1d1b18;color:var(--cream);font:800 clamp(13px,1.8vmin,20px)/1 var(--body);cursor:pointer}
.nmf-x{padding:0;font-size:clamp(20px,3vmin,30px)}
.nmf-b:hover{border-color:#6b6458}.nmf-b:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}
.nmf-main{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2.4vmin}
.nmf-nums{width:min(100%,160vmin);display:grid;grid-template-columns:repeat(var(--nfn,4),minmax(0,1fr));gap:2.5vmin;align-items:end}
.nmf-c{position:relative;display:flex;flex-direction:column;align-items:center;gap:1.2vmin;color:#6f685c;transition:color .2s}
.nmf-c b{font:700 clamp(60px,17vmin,260px)/1 var(--display);white-space:nowrap}
.nmf-c small{display:none;font:800 clamp(16px,3.4vmin,44px)/1 var(--body);color:#7d766a}
body.nmb-both .nmf-c small{display:block}
.nmf-c.a1{color:#bfb6a4}.nmf-c.a2{color:#8a8170}
.nmf-c.now{color:var(--kl,#F6A801)}.nmf-c.now b{font-size:clamp(72px,21vmin,320px);text-shadow:0 0 6vmin rgba(246,168,1,.45)}.nmf-c.now small{color:var(--kl,#F6A801)}
.nmf-c.now::after{content:"";width:40%;height:1vmin;min-height:5px;border-radius:1vmin;background:var(--kl,#F6A801)}
.nmf-c.nx{color:var(--cream)}
.nmf-c i{position:absolute;top:-3.4vmin;left:50%;transform:translateX(-50%);padding:.3em .8em;border-radius:999px;background:var(--kl,#F6A801);color:#111;font:900 clamp(11px,1.8vmin,22px)/1 var(--body);font-style:normal;letter-spacing:.12em;text-transform:uppercase}
.nmf-blank{visibility:hidden}
.nmf-empty{grid-column:1/-1;text-align:center;font:700 clamp(28px,7vmin,90px)/1 var(--display);color:#5a554c}
.nmf-dots{display:flex;gap:1vmin;width:min(60%,80vmin)}.nmf-dots:empty{display:none}
.nmf-dots i{flex:1;height:1.2vmin;min-height:6px;border-radius:1vmin;background:#2c2a26}.nmf-dots i.on{background:var(--kl,#F6A801)}
.nmf-now{min-height:1em;font:700 clamp(24px,6vmin,80px)/1 var(--display);color:var(--cream)}
body.nmb-both .nmf-now{display:none}
.nmf-top>*{white-space:nowrap}
@media (max-width:560px){.nmf-md,.nmf-brand b{display:none}.nmf-top{gap:8px}.nmf-key{font-size:1.25em}}
.nmf-kb{flex:none;position:relative;height:clamp(110px,28vh,420px);margin:0 auto;width:min(100%,180vmin);background:#0a0909;border-radius:1vmin;overflow:hidden;box-shadow:0 -2vmin 5vmin rgba(0,0,0,.5)}
.nmf-k{position:absolute;top:0;display:block;box-sizing:border-box}
.nmf-wk{height:100%;border:1px solid #0a0909;border-top:0;border-radius:0 0 .8vmin .8vmin;background:#FBF6EC;box-shadow:inset 0 -1.2vmin 0 #e5ddcc}
.nmf-bk{z-index:2;height:60%;border-radius:0 0 .6vmin .6vmin;background:#141311;box-shadow:0 .5vmin 0 #000}
.nmf-wk.g{background:linear-gradient(180deg,#fffaf0 35%,#ffd978);box-shadow:inset 0 0 0 .5vmin var(--yellow),inset 0 -1.2vmin 0 var(--yellow)}
.nmf-bk.g{background:linear-gradient(180deg,#2a2009 30%,#c98a00);box-shadow:inset 0 0 0 .4vmin var(--yellow)}
.nmf-k.on{background:var(--kl,#F6A801);box-shadow:0 0 4vmin rgba(246,168,1,.55)}
.nmf-foot{flex:none;padding-top:1.2vmin;text-align:center;font:800 clamp(11px,1.6vmin,18px)/1 var(--body);color:#5a554c;letter-spacing:.06em}
/* number fonts (Numbers sheet): the band, full screen and the sheet's own previews */
@font-face{font-family:'Exo2NUM';font-style:italic;font-weight:800;font-display:swap;src:url(data:font/woff2;base64,d09GMgABAAAAAEWkABAAAAAApNgAAEVCAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGoFKG/VuHIciBmA/U1RBVEAAhSIRCAqBpRD/ZQuENgABNgIkA4hoBCAFhRIHiVUMBxvYjjVsm8U7u1tVqhmCDOWAOwwbBwF7XPHMqLBxAAnCY8X//3lByRgbr3bsB0BWIEHRI9OUEzuqXOBRE1fF2mVwMzNJB0FOj9h9na8et6HRLL11RSlO66bCCglh0bskUrHat9n5XJYyty0kXB+cwIzoHyDjFeNypyma/msQfeb/Lsspz/MWA+78NpRxzcPD/p46974/IhKABDaSbSZ5kbYJmQhl/Ybnp7P349akEm3T1NPULKZNmqZJJRUTCtQUfMIEht3ARwpeipWVoYcUhtgxNr+tM8Y2aImSRa26R92+BPxLlMJ4QgjKYg3OIDyOfP+szX/IAxsQdcYKc+32o+pyPH8iYqztvUmV6hAiOdMCQ49ElWtAf5usl7ms5Nu2F5hf+zt4AbfUmpETh51bH7C3ykfzlb6TWIlUZdd5YIHhGeIf8vZpbbuCPAgsAutdrWne7trv3CZ7mQtgQZaNZ9WpJIvCVQcQC4g/uuV3nP8wje03s6qeOOIBYkjgiLwAKID/CDicM/8V8uVb8c5utrWjIiQpD5AuvVObJutbGcOubMlFSFIg8r9TAJo7bO0wA8AEBH6f//8203au/k5WCuoZtcGd42ghrEDvDdc+LqoAn340M4av5zFIAY3nyMBjmWQgLoNUAneryOd4ZV5viGQOcAmEHRdNii5Nm6pMS9ClS4quTBX/v7XPVKBSpwMuFQDQEWY6wAoV6wjzu251T6bfr2F0MypAbv4/XY0hQOFY6thVcpXYWbXyx2X/b6rSu2QzpRu2LAR28wX7eAG8+/8sSycrkc5unpQpO8sjU+oacjoHLN0bjjkRXqysiKKas8R2RsRK+i7CDEYIp9VX/k6u7ElFlw7b+5auMaKqKqKiIqKq5r5320/frPbQDhqUAAH8fWMuY2r/VwsGPBdJAmg3+G9zvDIC42+qqFAgQS1Twd3lCUBDezpxQSfAEgRPECJByHokJi/yxSchIQUKpDBSihVL8eIpUZJUgiBqgmgJotdB6TIom5sKFFCpUqpWQ3XqZSsI0k6QrmxQwCAsgAceIoLIEK01EwHQmgRqEpODjftmdgDS6u9tDYAEAVCWYIAAW/WzpQEwnqtowgZlI6Sz6IOq3LaAARXuloHlRQThtddcLZCjmijaR1c/MJIK61tWKcXBENAiEH/mt/yUb4D4Ng8znxv5IjeAeK/mnM6xHMpex87C3c2mbMiqjKQv3UBsTkOqUhJ3nLEBMSXqpCY+slCbUIDoGn68gWgcEoRJx2AoKHgzZPDKgh+89NR9twEfmXPOqbgB4UV/BUVEA5z+GmWdoJf1Z7QO2hsedxclXuUEP62KGOZEQi39QVSAXRbcsDcJ2+HMD74D0YHYyUzCMXIleKokMMHLg5slUdEgJk9mB2MCEcr/Fkr4aehLiyeOCYva5w4FdumvkijsMyaYr1VPmCTY0mtfXcK/T4XLhzwcOczE+2QAeBdpPxBjYAsPRDiPihgfpMkWHnJURmxkygPkTUZEAKi7L4m9jL1icG2fJ9KRFGGxcSaEuw2rPVHwiMiYWLz48sPFwycUKEy4CFKx4iVKoqSmpZfOyiZDthy58rgVKDWP8cjeql1XmMiAiwGncRT7sXPUzSANgOVAiVwIzMYsTMG42Ij+/OV2d2kgUYcMBrFLY8QIg4yKQ6qAOE82XmpDouxFqLTBZC6Xo/BYRm0HW+nCwK0sgMBsJDwsDHivv5SdCCAwQHWwepsggHpff10BvnRSs9IcWWPxlSB5v5RoLgmaV+m7o/Ymh68V1Ba77OcABZxUbEG5DCtUJVrG2utn2Jfw63hwjk2L9HFc20VA4YZET2sObjndPN9gG4XP6Ecr0j0YRhpXfUW5IsXegBOX2Y8/Ls5/DoOAkKwwS3vA6+0rW7xk97ec+Oa/20TFW1045RD7foxrRHE2P8sC14vDfn83o21k/uxLWxK2ZY0+3fVnKcIKBBMk2cPINU/pCkctR4halt0QM7GJgTPvL5QZuZxnPrP0cInqgPfJ+IE4hExgq0sanQZVxdkiIpwuKrRpeF3SxnXflwcryWD8oYPSw86punze/bnWcPRW+/+SUr0vI3SnFXsmeDlGBwtQe9jQyzMFKch5xjQ9PtCDlp6JmJf7PpLBkYDN9u1O+y7NE8OWiehlSjEHYFfxdvMoEWR5uRVLkUkH8WUgtsiVz48h5mA1qaqWToSrD+W1OZzc75OVQJ3a2baaOUJpMrg8+nC+GUZzTyxlhZuT5vAXnKKRShhKxHPkSy1XRsHgGH063zmWui7Q5apWIoaiPaAU+n1o3Jx+ImTyWQXnmzVhnvjzRuakVHvNiRcsag9XM8hTpxtJemqUFC2BLFaq1RpT//f1Sn++WW8OcuxUdHayeOZIT9By8uSBiU9qZ/6zWOjC1yf2lYhSTEp1bBqxcFRuIzwqa+nCvVjOf6zyQMNV+HwTYP/vsrrcJE3tmFUHe5Q4LIxsXm2e+FdMKIgAQ7AQMeKo6FSoVKtFm9POOOu8WRfN+cIVd8y7654HHnrksSeeeuUvMH4YGJCCBUMJEQItRgyMOHGwVFSIdHSoNEAJuVeLruUgb23k4zTRnCG2s+TlPOHNEsdFIpkjli+I7ApR3CG4eUK4S3D3COEBMTxkJmOCeeUQ/AVPiOFuJ8Q2XIbzsA0EGw4PITEyPf75m9TKaX9nd/y6sGh010KZstke2FXO1qGUfEK429LnU3CVq0TFB8cWjMDuJwj7S5XclUxkMzHUMMp27B7v83Gzp7lCq9NfLt9ToyBJFOuSJUV0OMefg5ZGOktm/zjPx9pGD/3I/LZI6FVX/G31Bmcyj6ljnbmjI/m7IsafUq0yueYMBMUGsp2Wipk39pehmO/YvlXiOfk7LWL/PgGzx+3Vn/N+mHN8uIVToBB7Y2+AajFSnXvIg0wRgbit43MEaUiqJ7lz0FcI/yYCgVmrSlA2OB/9hi33v0gEUno2UY/9J3uluVsYGkurpZkWwKotncLc4XZKYEuzxYatM7ka4iFyaW/1hIur3fQ8oZM2Gd1KZSyiyWJzZY9LhQyeJ0wmcDw14GkW0/QiYeQSN569hf6Zh7PHxpu2HmJ8Q3WejWkN11lbNe/GJHqmHmAAPrcl032M275cn9sTTxx2NLcG69MiZXScj94UGjjVVsetjYc/PNR1kXzo3Cq6ZX8fLoWqiR3HFsTWFF94eM+NBaGKaVlrnHeyOtnmtB63ZmxPld+wam7CKq+uLaWnjdCRk3IUvbOALCFGMASSketYQu3THtjZio8TAK4Re8gtSha7tuoDAdo4CmVW7iqXkNEB+0SVD7xs4rZECXI5Qb2lwUd9X0uiq05L7hiY6onOp7yz8efuMBBSQ65ceie4XQ+grM9NTHpiEC0Jn5nYPk4XNWLLtPidDprTrhcY6qouPXA+Juhdnu7icSXBOrrDxQ43H1RziWktGckOsJ/530ZbwM+cRZwJ3MZn+khQx79s+L6pqI3rtBqLaK+HPAFJ3IOeqmLi83uT1u0v5yVArLwtL8K7D3g2HO0k+vRSZmf3Po/dtcKMrvh3jD9mEKqeL1AdE+cjCGAs+6H/fPChrkTeaOChRB2issnAgbX01dOLl5yz/W85HhOnz0gSANHvv2sH1jhVzma+cZaVZ6OxOdOsQSoedGuj5nbz2wp1DXLjRLQPZ7evPAYLcgFVqYRUaDmHjNGwi0PaxaoMMQNNhIcr8nFZxb4hJOA9hq/35S6ogr0RWyqincNmqIRQ4OdfJXpY9J9tq9ckuRKT0uXI7hToaMxdFZwSzTh6/Qh8ZhiBYkrl55R2EI57B4SNmpcs/bU17tCpa48tpTCfPN1Invu1LrzdnEKQMDPg0Yvx6/gJctcDbSFQg8M69JhqKKViNiBh/X/zYL4cj8EUWpVyCxVKIDH4hsViyAAzJdLMfWyK6B+AWy7HpWY7ymBucz1ewELZIX7Njyq5wthtpYzYNSV1Vv2GfUDZscDXNvzRfPUBqoI+Xb8eJp1YoPr/hpoIQhcqmkSsWJHiKcmoaaXQKydXpUaBOs2KtWpVqd24Knvss9KUaX1mzJhwzjmTLrhglUsuWe2yy9a46ra1XvjW+773p80WLdlriyL/VV5aRy3QYm5XeEuI7Kla+FUt8zDPA4PUDpUP2ZFoVo4Uk/LRFWGZnb0HTeLE3T/iufIRMuw6R07Y9Vv5rhuP5Xt/e7ev22YKAGAA5pDBIFYzGFBgSQUs7QngAeAE4OUMcI/z1MUErFp3u3u6APC1snJm2AiwyQp+oahIEWuA02NTae4rtBrTuiAOl5WpzHe084NRKCYypmmaj8bIzumnBy1m+WJT6XpJVhvRLZEdJQOJ/eDF4dRTfGDmXalrRE5vnuznFHsdm45I/Pxlf4SLIOnkwxqJZ5MNI4dEcj2qPPnDzAJlYMpBSFWEVU1MNURW5xHVa0b0CxXA8zoRdJG8LKMg3YSxnKhWEMZKohoiodFb7u+Y4/hOOEnimv8SuOU2/ufQCPI4O7BimfqGwP32/PR8AzmvTKj0bHjGnm6v7Sl4zFHXXuhDwoE2yzeHnu/yuvFax0W8Rl5dL+Mr+aVRbLgtmO8wtzGbMAOYFZgajBQjRr9Er0EPobmoE6huJNQYyo7yRb7y9Yq8iTyFXIfsQKqR4UgG4gXiC8R2RBeiBZGMkCEoCBj8C/gGOB9Ogx2BffqV/y4XRjlFd+Mr/gsCPYZuQ19AU9BuaDu0DpqAVsAAxhuWH6CdREyqIzKSlo6MhaLZImPYOcRyUYIqSlRLSVooWRulWBGZqs+4NFNkcJqNn2Ulk/NkMedkuNWks3lPuH1jQxb63v8Vfa7VKfcWwcqAJxhYDo6DJBOXEx9kFv1QioCt59s0piKuPiSmDUx/M1oi9Z8ONIPNcBg9KAJmdEUgXMTsE5BEIgSra1IJ0jKDyyTjQOYUjyEBNEoFk2wO6QdiuTzn6nxhSxmVpne9wRtn41XFFXTjBhHYaRUXPOGQVf1aTOLsbWnfvD8MBAy6Q6Oe5MiwtmPL8XIu/qKGu1Rd7uVVc7wwMCYHj29rHjFS+IKKZJWAGD4gUMAGoZqBoIIGFQY+GOcdgyFXwgM1yPoXMYhdYwECREhRybIPuMjgNC0xgIKNGBh+XRRRTH/rBi5olaGXbC0v+k76r8+InI+0Rk+BRm5JsH3lazoCkPm8THwOvpwSVVVGbdm05X00WGSOLGdfhzdQDwaMSgwy//nW0xWGzBTNgajSIauKFihtYeoMifQEo9GlW/GUi/+Va91DlyVG7uNaflqeta1U/UuLcfpo9PvIgC0GfWQI2bAeI9RGHTUm17gSWNi2voXRMEVjtnMxv3R2Ob46Q5lSZja9uL7UvZxfTQiwPfVt3o9sKDubXgizf12qL4er4YfipwVKf5hSaHZ+aaY/RyFHyEbSTlW7BDGKVqnBFykqgNUJmJO+vTQ4Ix8pmmJbwXWBM5SMtvCnztYooB35A+VPwmCEDtTtOp6WZMUD0MJFrk49hBVT9HRJFZyZKgcKDuWwNwljyA7yDZYjybwWqWfS2XMk6AH1D56EWo7RnJP2KKc3Ni07nyFEgBJZmvybHgzl++DMoKb9mH4kP8wocOYR3AvaI0iP8aYyhwqVVbMhcGk5qHJRWbgeSL2wppHMCHRekIvILkO6Cu8OoXkSdzvtniCP5GMs7S8k//LzhjAARwUWWJkMdkguejlYconK2kyjmxHlPJqLAlxCJYQIgh8i4YdIiCEGFhSEMdlr4a+PFeZD0DkJkm/LGEHieNGtMjk5JHByqwLADJ7zCGbb5BDBm/3ETb+C869guekosJW+1TFOfVvbTN4csJwE2oqZ+nwzO7vYJS9F9Jddd2+kwRMBKS5SQwBmadFyae6bMnN6Pp9NLj68tK+Q9eG/6SFkCuWA5CRVGUMqM6SMR36DULbkNBJdjAD4ItHJq8ajtix71r2h/9DikhUNFeIfoykaRIGK5HwhHbY/fWvrWjkQJMMfJsMO2Zy2XT+MIZlrFM7svxehidpdJuOUf2cEH56B1Q4vra+MX5u/y7hvD4AOPrnNir4s+aI2aQA+RIxFrkxXOSEjAwO3g0lpa3fRyMwIQ7gYInfiNzNAwA85qudGujJTICeyhHI2odewAE/RJ2zAY0GZixZTCRZo+hUutXAYc4wIhEgojBYqv2+GUOk2fjg/krmpWThkCBsyJAALyrWkF3xDBklWTNEsXvNsDlkDRQoYtlILi6/aQj+k2d8d2QJmbBEGdFuZ3hIAOfOSmUPUyFzZ6hLckEESxqydlGYCipmpXzvZm6INUQwLAM4P0kCbvudVnav2NEApcjV8sFWlcEQaU9lDTSZFbjzbgYfkDrvpgycBoAQXAAFgAA6wAAfwgAgI2QODOTDoA4M6MMhihIsAoKDYafl47qTS0vomsLusobEebP+H75cCNtVVVxaDDXWNpXVg1VmMiD7RLdpGaWhor28BVU0no4OSlo6WBuBuQ9hJxfRDMAVN4AVGoAVKYEXXCVzgwOBiE2QyyoSQCTTNhRw5qCs1xc4+qZHGF13Nm8O4B23lFg4iDcIwlhKc0MMMK4x4hc1jJYF0Sr3w0te+9R3KCbGX2iOJcbHREKwEk2sFGJtlTbNYDu7m6gbNBgK1gxqdeicc5qHKV2C89ISNQBapuVCAJIYDlysFCS+kBmDpd2wGCuCr0kR92mIXYtYpytgvmUObPQ0DoyyB28TYgWYFWUKCZrZlJMttFGadQEpDzoIVEIRrPRk04VxU5M5caZfSgnoW/gwE7wvDEPo0QwoKTN4E8+GLngGH0Mjq2bggMuL4kECebPZqpst1i0wBWfyl/e4HlgGmMv7D4fUC+hE7fqHfLg6oHE3cO0DXAOKXTgHag4P04wKNz0rnMbb9qmqDAPCLHytDCACh6A8ColezEbU8vgEMHty4pXEhRK7RRpFDPpHqiJCgx1IkFJnMTneuD/v4IDgCjoWL3l3+G/+zKc3M1KY3J+bavJo2s39/qHWd/gOgDj6pRFvbNG3XdxsDTT6Z3EyadWyuvnHnAbMAyij5wP8T0xZXbPDFAvDfT98OnYHzC+Dbu2993744979d/zb+ecKzh9bY6q1AgBGA+V4AxG3QMC46AnE666z/r0x75IKX/vSXx+Zcct73jrvmmFknnPSL//vZjFcguO/onhMjdg4WGmWMc1xc3hUXXfW7myGDJKrv8rYtcWYXdK5QBbLFY23x+v5f9kUAeN+vnjrthW985dtA4O8ggn/0+NJvrvs3KN5asNe+YMEfXjsbPNij131HHHbUGSgwCBhIaFgEdBRUND7YOLyRCIiJ+JMI8KNA0SLJREkQolaaZCkUUskpaZgZGJk42WVy0MlXolCRMsV+UqpZg0ZNOlTqFKQ8cAgN7rrnljvm3QaByiVkgGgJkIOBWAI0+QO0+wGg+BcoagOACliZusGtxGoi85rMWYnWEjvshOWxBqKJALR1vA5jyiorp61OvJRDOY5RkC8MtSotvGzkibGNsjmarMGXfrFpX1sjbbQpnlPoK2N0mBCzGreJVzmaZKuT4COWOpDfkdtYIIags7CsaLOLZdHqouhVOySv8n70SnlZMFD0EmwNOQQnWDfCVKhEgR2P9WToJ/llqxXiK9Y4rtCgdtQKTxFH8QlHLkRfuOXt0Lnz2h9wKFjeKBdD9EM/TrEljwKuFOIHRGro/Fp0LveO/5hkik+fOfLUR/CLgoGDStxlGX7Ykhkehon2ukGw+UlQ6egCPaW8ahuy+S6YCrFD9CoMBMM9BiLh4kKnnnaZjbeIlF0XxxXU59QmaM4DUUpgaYw6yOqDfjNVHUVJETixYnlOQV9fR1u2aaJ5kya7pRIB/GgpMUchna4jjQIGQT7MRjA5P9TryBSHUSpncRRCFCTT/GCDH/74RI+NfVCfNjRoaiQgsVOsoU+p5jqCikgYgh7OgqYqIXNTNGuxPl64/AUISn44QD8ZME1fmq94AfEHqAC1OdLDpiqMPfDih4dapQBK/PHx2wihIUTdIx7D8NZB1Zxe7Yw1Z/kpakxlL/auWIgCXgD7Bt3kla7X/6LC/aM8ixLgqO8sxOhTLAFqt/VXzr6xZh4rWB697MwvokUq71alQvfp4ocW9HzTY8HM7GX/qD4BfJNMQogGEWhYGz5BBtnDk4M6X5ijVJiRvmIiMdagLgEdxE5xFy60tm1S1zdTJMr0XIYQwToaQE1MdbCcgvkcPT7j9lMWedZkaaeYhgdCg2nHBGXIPbvxZkqmFmZv2i2rSVHkVl3d6pxcOk/IX8HqasNw+hNR7htOx85Biw0P9wVrnR7kxPr4pgB9Wcu1cpciskMxsvTmIC0ZRl1hMK4NjX+Lq+m6lCqtYxbYaM07OhoHqokKjuKv5uCjaEV7XDcz4NMU5tVdOAU5mNcae8WXvBw77X1vLxfSm3Leyd6+TWpWzOM8otFbVjlXCi7+7qNIZaSclgtwEaUiVznpidJQoldgMh2/0IqRfq82VTO0XSrb+ROuWy4YSJyZ0xTEgLjrVIKn54aHj7eMagJkfRSBYtGDnHRE5z02pRs82S6T4GLCRvjioiQGQ/rR3l4P6JVasrTK2H3+JxydjUuKZuchnQno3SVuhLEa7M1nI2XanB51q/ydkKgbVtkqBUcaaVvscRDBWrCtGKgqWXxAOE30+6I7rGZVYVTuj4a0Y+e/32CgA7xS8CjuV3WvxMyoBVp3fG6+s5ItXzFD5JG6FW4/Y5hZ2d6Uf+gJf8YuubrhMkUL3Owbd0B6/3obgtOLIz3ZBPVy5Rj9Kxr+AD+Mq7dIL8kHpr9RHNF7M6x3W9Ky3aqEb81UtIA6+kQxE9nTIi9AOhpYXSrBuryr3sz2YTX/WtlNBkZwAdK2nN4pi5s3MbAE104BUVy7NWlCW8ofUH/bK+HIVua5SJnGHyPZJBMHEmFywhc5mLdXLOPvERjenBsZ8CQ0PnqsubPd64lIsp0C5HBO/N6BR7axfa70igP6fCTXSnEUtTiDnK0sUtxiLUEbjUYtS2mX/5Rp1145lZWE8ZORID9pM9ZNy2Y4dwYaZuFHO6g3U/8TwaG+qj9qdOLhdgvAcadYM2XVVDzVYJVBN6UNdetmF+kCey1xBSsMYKQZtGxxcrAHrTVxwAodQ+xCXmiV11kINKGNrJK15QxjPQJlfAaR3QnDvq1Pb/pOdvN+JMvXprWEJmjxMccNkbcKLn7rcayKLXGuRI1W87Si0thaxPv5Q47dygzN9mPlsKjlSmXw5DleyWbnQ+dZVJiywKptFLqcpQLmCoVzODK4G9LMsFZPSMtBIwYX1KuvucwhPjkQwFfJ3xxI1xVwXZjdOBrl1QA921VXRWSEz9ZV3VmVM+bhBWoWVIHMO6EOu3Fu9vMErQ5NLUVGi9GVl1QppfOzuNMMIYM6/YYfbIwn4LBv/w0p1xEE1CYED5mwGLMRHuAcp0Mnev84KHexx1rJok2WnvWj1oVLmpYOSGWiEpweb7cMAeWYPvWTNpZ+f2hkm3OY1PZIpiYwpqqqgF2Qy04X6y/XMHs9hGE9QEJEHOnVpNP8yLePOehWH74XJ4pV+M4HGl8VZXjZA/gwGyCxQEed+VroknW5gERZdFNg6GXXbMyqBahZ65a0nK+4QVqTkWcqf0VXzsLuEXm4iIqrCXqM99ZGy43npI9elx3Udf/4VrxMIXkdBjf3s25izUQJcfL0UrPaVwWt9/XCiGg2MUD01STDcjAEyXYasjnHYgZ94b3kqW4+lt8b453UCXWb92NH3A2rnW4kL2Hu0AGsSewCFFTx62VKsHsS5VdZx46DtBl/whB31oYP34qX6yYul1FW4H/p6ldWfocm1SvFpNH76Et4lb1F26hxhexVkwwteyvUptsrF3W9D0nB8zBGPQ1OL/e857InmUBI4f/DxAc8Vqck44xCaWuDHhtFsRiVusOS2/qVsZMNlKtCPFw78WAeDnS+YWshOr+sag2vGxpeAOaKevqnJ+wtVhvzeKNycXwVKTSg260eNode6ISvUh42wzUzhA3s5doipLXC/XuTvbF8wjqTiqBM929NzQ2lxAh7LBM0P5rY/hhz1l0em7vxN0xrQiKbqwLAeK/Rla8nX44TtvFbbpvae4v+wBinhMjIiPzGrDWFmnL+5mFU2NbixOAunPReAHVGmxFQsYHHn05vuWfVw9p4p7EbRn/IkXFI0qTZrzXyy+JuqVmlYXfg/lLkrfECg7GkRKOQj0s0wcS2vC08pDk18UFvAWTGumUs+/kO8lYA7iWWh0ENGnCtXFWlLJGeyw1eYPDPqwQrROQWB9L1rElalLcXU0yQe/s+YUsmzEg3SjTnbvXzIynMePz9/TVbCkq88VH3+Ayt2+ooHJdwc3FCuB+V7lOxtXvYX7jY/v8DI4lVpF7TFS5/yH7SRqwusmeUIEOOnAjZhj18mOG+zWk4jfEXUXygg9CA4eg7OJWxWY+8zSzH7k9NjxMVXwjOP0JVJKhGhC5/8d2cpyUagjhbKUbbKi7qhlGmatBYEIM6VpPzTmx5ISKqzzBIM0VF97301iKjyFJIEFRDDw1bvOSDRcUTJXqNQ3fTgDzdFpHd2zF/FDJcRMEB61wzcNhgXT5uc8FwOKGyS+ys4N+SiqrtFk+GmMmpS2iDi8Cb7a1E6c4iYZf4q51tYC9Ksg4xNoO7AfOFBIEgoZGd+M+bElwD+0rZC/kBCU9HulCFEGTYtU/ldfXC7u3X1wO26dFM0hYfJxWDnoBspGJp76l0N+O4MRpNt12Otn3tWOHgDwV08GFejErc291H0eUnnu7QoUTfI6EKv78/WDrCJ0L2IMhg+jukSST9DSZIOTmKYxERpolc46bNK6j1xRTlsjIFQUhtRDo/QMNDibCghkglrdH41WV7//pobzNmc6B1Dm9Pjk5E/H88B5BBswYMOSjwrIi89PRf4IXbyzQ4FUyLVQuMdbXVvVIgghw0oQEVpSyOxC6OZe1FPTATOG8/JTRzY9+RBZdTultm6eUhw5o/QVr/NJ99CU/r2Iay5IRIPofi6JVV9nKn2C808LPvx44PXBpf2wP0+U2WZZyUy2HQ+w/4Ff2kGFG6+tbijxwS6XsPT5pwqzn9NGS/mu4mmdPLXjZB6mlGBaq0uLG4VmGr8tz5DCavWaR6Ob1JnOwtl4m8MCqDvLPoaImXW8yX1vswVActYDkh79TSfo/KCEVAGaRRB5VUlmIFNGqoxqqyjlWPrNP7LTKRo8efN24FPonefgE2/4wI5zCYg23dIYd1AxovkFUcxkbCB745+6+je7kpyIboF6VnTEV9v8Vlp7ceq8qJ8x9f5LUC3emCDF3ZlyAJaAVCgwN8wy1uBP26qWOzARj6JdtG72Ot2bCfIT+l+4d9cxw/ONrz57GD1+y/nWmNwMEXPCWJYeQ2bsVnsMT+788ZRcZHyo28Hlx20t9bQvrqzQNI2Fcc8EPyFbIwNwfZhS+EryjEqoN2DF1go0BfxZkxdil7C4sd4gQ+Ejzy84eo7Hw5r3ZlpSbjU0MqBaiuRJ9YKckd+KKPcPR3/sfbsE43SrwrC+/AdWYTSAwF47VGv+KSr88BT7EnSPHB5x/s4YP6g87Cg9kHwZceVlhA8crTkU9ocJpv6rvNp5/NMofaxV73hsgTVZQJUH+4dDMsE8Ua/NFnMCEslYny/hk+ZEJ/Cll0OidWJavh3ZnEVcuXJ+Bn7aJOp4FfS45dQZ3Mpk8qK7cQO7aDvpM5dfxgG1aP1SbrNUikDRVbjHdg1ImmWh+HsRbkwF949/atgvICzjjVigGiAEduW+QnixRBy6e9U9w6QIX1DqbDcsHxIg98mwkMzUQZkA+/Y44JDslBGP/M98wMtAJngtkbQwyFiK9Q49ZKorGxVxP0CW2YVBExarG080HvdONImnQzfZJUJR1LN3ZynfY1SAU8Z0TYAIsRUNI4LoxmLZTht04kVKX66PrsLkQBxCnyTBd5QP37eJeT4KoQAf20wY8kdYJGxF3G0GufwYSQxIBYzivYyNcNsBYQnWkuxlqiOrBKp6WQeoDc4wGoI1mfwVRYxuBP3I0Jmj9Pm4RYdZ65gvsfcs9usPmsxIQ04DnMEb4KqIAk0J7iZV2BMyHsaQGCbd4/+KXfmtlv8o3Q5GmEW6kjpJrYcZd5uV9oZNzqcUzNOREEIjxFntNFnppF2thD6thni1EtkzYxWO6xRGLVbp3BazjxW25boBAjNgDwrucq7+ugV/C5Y4MDjKvrS16mn/K5GMnURK6Gq5N5L2aKPPMEyooOeiqAUI/uZxaS8z1stQr9KcwuVYsF2gajF4jePiVA8FNr98aJyKtGVul5ldyIUEEvtUC0r6nF9pa/kxtB5MgkEJZQ+7SyNmlFDhf81+NqTSPyjdwt0/0Bn/7lxhGDU6WOg4fHhd8np3rYu3XNeB4iSZoFhs7WDysiNtNWE6uixmyWdp6teVARvIW2ilQhG7Omt/LNa0JV3EJiLsGByFkfEhbFKyLmRAyyDcT/nsMN50xu+Pdq7ufRs8kucr91WVx0QOiwsAjvwmdCuQoJ76LkbsKyG+uPi1wtwlQ7aRWphlQpHbNa2vm7+btJHfumViV1gabekfkb429RaBpjp0Poz0ZY64MrUwXyNO64SYzSZQG902WtwZJKQi4+O6Gw1j9bmo+1kpo+RWYpJuQCizFP0f4Lt2Qc1gwb2GmEu0CQ6SXr0kpGaw6uILjxroSian+XopvsZD1gRV7xeXKuSZn1LDQG6wdpPdwBWoxgGuvzraV6qvLZyM8mqj7M916r1c/tbZq12zed2yWOzsdl5PBUP5YjaZrTsX63znvd5io4BlDw63nSAErUo8tM6SdwK8cqALMyjuNPoIKzTSuIzeSu5xaQAYKYL/SecEJmY25nTNc4xWTHWhKzWgVFQeMEM406sM4NWyAF7FILIjJSvPoSa1aTjaYqiUEtKaOCi54G6dJPX6NTf2HBUU/ix6RaTU9fXFVFT2LkALE24d3TiR93oeTjQSE+HNWH8e+Ccx78AFf6KYfEci2fCbgZEMr0jrncuucOSBuYmh5wBnrvYKejYRuwRCxdt66y7aOseM6nnHQUdvlJwiw6hkTP/6mqeXQ+dsIb8saMYdFYRuKMq+ksWPoQF89ZLz8varCVscm1J8i1F9m3bN1FJ+tap1PAlCfoyeEdT06n/VQbxiJGwY8N/d/aFCKfCZWD5pB7oGLnPUCgjeCpI7Zg2sjftBGQueitRmowe/4Yzl9o4rPjxwTZncF0VrEMK5unKDSFxVF31HBNCmkFIYfgjCqzRFQQV5A9RNXzVQ0NIGwxqRaTRRwdzZfbbF6c+LFfIfJmCLGwr6hKVWFh1FcquDp1+cdANt4ZVqaMyCFuKqoJEqV3171wsv9YYhByLzEyvvNnUNa/1+STlPuiqrNzvYSphpkQF3CNb020dFRATUuyfwcmC20JLTPElrHAnsVkXSyzjejuEhakqEoDjL4mRDpWTcpZW/jVO1M31yWveV1bx+UzREqxZTIs9rKWXXyauiqKrPrjdfzQEXT+JyBiMaaVMsVu4Du4AUea3EXrM/zp8gu3Ca1f1ZOjsptjQtsJhYTcpMamKPBq0TzMqKBrJUoQ6ptT+1WuKZDtFfntvwLTzec/G3jBSboEry58PtYUWFyhZbx3unh6HawPG565liNMopaB8yczEH3s3OTYUtJqvBtjDW3Sayr42oyGSGkVzkbubKuv9HIF9e/GqL6Vn+fw9TLnZHKQQMmwYpRYNShjqL+2kN6JWb9r8fP3gHKxpCbIP33CDctiKxAwBj73GqP4O38Gf/2n6zg+NS+qRkf7A7w0MDPiAqGRaKFZUeLa1uSADkwWxhJapo+tYIHUW6xf5cgy7waH6EFmZgpGY3fk+GpQSJ+GOP+H9owUnNaeefk5uWmYWOtEgPd+9hATNuGdcfX2hHJmH80IzyQQsaUUQUSAFpQLTD/uvv9jfF9yEyaHODKcv9An4ObV3HS8nxytaBGwo+5Q5Dp3iey8CqZNpnQRswjO8DJ5RBYRHFs0qg1YVVTT0dCUwIN0v9Oz3hkK7XJF4Wnm9hLf/GmDtPhY8TRAL6gXjqoXPnzm91FoWUasPrGqTBELsLWvpeOaBYBbUFy2heRptXdLM0cCDXnyC+8/404ml2XEaROzyzLivyswEEyLudbEJTPCEsrcdKx4+ssrdKujsd64TNZPaYzKVypch8j3SXW78y5M1/w4smlN9FieXzC26xs2g2KxGdFyWzJ4vICoIUR1HdUsmIk6pRGrjGo6GJIS+4xGwu370seaqquW1xoUJoyiqhzZR+AimfjPhyd8BwUzi0HPfm6QAh8LiU2cL+bMrPe2FQ7ptxJhg2+khcfUC0CxWNQWE9xOLCbkyxs6IwoL26NC2yyl4DNdV6S7R5BVP1Ea+zufr3WPlcXOgyfmzyfXfv6LQra6pMXYAj9VKrcCZ+jbp72hK0Lvbo0KrmtaQ3tkTg9XY5nIFM9yuWJzVZv4SFKP1YYm3L85NgMBBD83B2964RqtLBYzNTDjLGimWbbL7EiOLY0ts8UWr/beNwnqRFYnPh9nkZTsMDPC2S+V2HVJDMt60oVwc/MuZnckMhm0l1+x+FrPLXmkhbcNDy0LDzJvxQjMpNxjBXvA9jdyXSKjE5eP0YqLxnTsIOMIw0nXFamD/Qw1XxmLvHFsv5ttERzjtNxRFKs5Q+mWErQ9kojatVyE1kaqOIo+3A6ki1wzXii5f71ezm8jrEvq/jU7JyrWiz24xSbQnUxXZIklaeZodhuhYA2vMEleKtjDO4rJX3OUstxAs7/8CzxZQNa9kXUc1yz0EgM+Debpqf2oiua6yEhAWxTnIDMxc6SayEIQ4d//F9un8LtW0fK4Wn3v0yqmQWSAZWC8yLXP4xV+sa25WPb4BxWN/mfCyNq674v9wKbn1Q0CoeEDypFdHaQHsWHk6rItQ36qqvqT2d5GkQ3pIDefi+ex/uBSsAPjQwf++VonlkZtklUdI/DWf+4TeE2eakupF2tM4lS2BvWnd0Oc8KHSmtgiUirEReS+X8hN+4b1/2n6DsUN8TNOGqZTt6mNZrCYsAr9n7xhUtMqYm0hAsAWwlLEgOrXs93PptC2KZNNaiNWKWt6rV5YAw3/Ky0A6Qsump1pOmMOybvrfDUTPMR4SEu5MEfsxTOiX+xu2Ps1uUIHXvyKWYkhJa0puVCQPfSxmrvZ+0PmHhjBiqXerdvyZdNHRLf+qIZoohg23PBz/PLqrIaVpGc9YmLsBJ/69/LV+47JsWo1IbSYOc3gnwN3F8qhT38+feJt+W+uaVL1MWL16un9vzW83V9H3PICuBda/RoD6iXF/uZ7EdbmisEIG7EsSc56N051/EFwJ3+S4Dzi1UimJEiaVrKJ0eoZIFh2D7ChL8FNcucNUudiF7nzIrkTpFxibP+PyqdBLXrgsMuwmgxyrOkHpS0Kp7E7bmBZvyqQZYVFOoTfqxzhWHVGVq6PYD/RP8qMcAKtQGr6l1DrmnbYq5JRPOzv3ZCygtDn6LJGvXBMvb0//tZ3c1Jp8IiPxedAcGvIe97a+sbcIzX9qmiVpc8pSgeUh3ChY7WsgJteAej2OQyCbIyj96ge9fNJKmtoXpDToid1SQ/F6fLLBam3GM3D0ewGhehRZmYSljvwZ1L4gxIyGgO1poCvt8HPkmqzEFxNccXmQGKHfyZx6BEfkHCLoihCQKw5VrYI037vtanely28o/koDjb7P3LTSoIJ/whRKmNyCK4SuVTEpO3hq5SIfaTIcJJs78ztAUEgzr58TKQq0GEycD3Y0OQKoP0OvKkpt2USS1cGG6xcRZk9g1BCKMgxunPpDZey1Lu4vu1tpTjgT7C0SFKKgQPYSBsDunU5zZEOW5MkuchhI24IWK7Pa5GpVwkOnyFkoorhyIMR/I0HiQ5UMQK+BuwNC/+trLzu31W6U0xq/lwLdDOmKlZ+ooxrS9ANXtj3HoJ9gfEJnFQacPiXI1sztfJTbPyjHUyxHGihX2ETBidGAwMpZ5saUjOifO1H7sIvpUVnaxsGo/OBrA1XRRjcfiHmkBLoEpIpXz3krAbk1nFZfjR7Njy6Aoj7L7eiwQHPzYm6EOIgqdpAOSncMvDghynTiCV4X/KZ0Fog8bDHSMxKK8aIyYr2N4b0fDAxipK1Ek56TSKcSOqsWZpMV1+xlxGP/JWbEAQmZmiKbzleLYeCoyRiGIxZgDWtxVprKcKQj0lqGhoEBBqkbJj6d21aJjcm15HOg1VGr1tmqDWV82Mt+BFSBaU1bm2WudkH/O6JQgQF2k98d3eg5LkU9w4oPVNRH+zv+ETjKzfupPt/g7U3rolKb/avqO8MDsrqdXMtL4TwZQE5aPnK6PR6/8iNnKyhb6QpG1cEig64tIlSqpjgJVwZpwmpD/H3ZikOBVn7CCBr2loqiLQhJ0gVpBrpuDm9iW8VNGL2E1pvxiSLwzrjGPkYzVpU+gdcgaA4SJdQsM2bt9jZCrQJhjSLV3CqMVCgQlldvfy8b8s5QDxMG/4/dXhnSKFnOvWy/1jpf4SIthMqQN2BtzkSzWmM2nCrNSQ5IzPRLGfUhKXbQqMrKDZPY2rlUQ5Vfr43vOoIYHyFSPhoUvjaNze9nAp3tooBVYW3ZfDj/Xqym+scv+9YaIeRm/OwasqpR4Vm244ZDCaKLkg6h6tAO+CAqiJaDNygxFAFAtam4CcHqTO8U0KyUWXUkpt9QkYgkYfnHHLC8HYn7KaVhRf7+Ks52MJhMxIQfkcNLPs6To95gc+akHKcl9rPhqmXi+A+csDZAaeW7KnSYubmA+zZ+VnMC19t9Co5b4Sx/G774q68k5GO+d98mHgW0FV4/DqEhursiw+gd323oUYZfo/h84pDCiKxM8plbiU/LH53aEVBdrFSK6Dl4hw4rchVpycDdhScUzh3sHSkH8o7On4YWwdorfjCP5ZJR2Pgt//bYNLbLAxliTZyRU7PSzizU+rkG1jcf+m6QYH4Nx+OLJYa5YX8lJUawJMhyRRUPy/gBph3459roilO7wV/etf323Myw75hslFeFCyFbXPKklX88MTaqIJiZ75Cy6Pn4bOwOn+XW08CI57vPe3fecADzy+e9gWPKHHzpOitrzG9kAHPqg9kEWIzKBsG46h1HU7E+oUuiNySjdNTl50qMpvurV71iOodFMoDxewMGHjiWYBRxP4JIXKfEoishsAkesfLOCfqD6zZO4j1nmjdxNIPGeGmbhGKqway7VO/eNp+9pxFFyrDlvl7u+FCMc4cGW30VYqz0JmoYhDOp/sfp+KS7pKLIJy9ADzH9BLwV1heqiCosN2CcHM6dRTCgpOw3hf2TYDv7eHGbn+EnwZ07+EBaV0YQRCgQSvcEyn5e1F0RrlW6qUXKBKMPjepipZDppAmFUcIIo4J/458sgb/RPi3H4FHkbtTRgP+6j7dqeCRsJgUvD6i9LZE61O1loDfNPlYN1xqrbLiMnJXbdgpUx9aZ+Wbr52TlGzuF8Wqivig62u2UwXn+fGB1J3yRhCgRilql6eAPH4U33rqSWxzR3ZgjKYIgB0vOVo1TNZWkYG15ny87qJUc771OY+iyOuN+VdA6d60t0dTL/ZGuDfAQ7zk9zDqiJy1ylCQfjhwX15fRkJkp73TmNDXi94/qK+XBe/uYHe6aQXdnNwJsN1z3zOuSrvHRTXlic7xqC3O7h4EVHr+eLsRKoD/egRvx/5AAPbvXkyrS1h2k7WVWALfIq2LZxnfC+340WfOd27fS4AS0d8L6fzB94rPxf0vt4cyrC5x2S3mx8Ry+ObwWi3oWSTUi0RptHH9Mtmr5UfvKTnTCeNiRGM2vpovMRfxvhYPVnsRm7Xd3yV67bPH6+p8AXIWyiZUC4OMxez9iRUuFqk5cPqVmPeyJF5b6+cgEOoDFqQ+F+2tDsLw4f3ZjHHJYCCYWCI3ykkPiPnv+zO0pMadEnZZ9S+ucAmALUn+dFX/okuVHPQR8SGhJrqO3AjyYkn1YnI9WIi9y1MhGVkcJ3jWZTOp7py6laB2DW9C3p3CUDxmKTnX/+3tkyS45XM8IFnDnZBWFaaCWsYMvnc9J6gu7UvuJ7xuaRqpuCUb+4PAb70UaNsaX5a6NOdjrOPEu+Vz3C1LU5E1r0ZSJ73HBfVnuZOkpIzxhKlk38A39KmKgrEkpuJ68gy+B8xspyqDMwaes6leM6j3LUgp/1D3SUHq5FVWzMVPSXDujnSp+FC/NV3UqitiMHFn8gpr1+cxI4NVnqDntcznYTBUDeM5eO7ZromEopgWyjZ2gywT+IneKc6zDUQK6ZFTt/Gt83UkWVZTdGjH5P9viMSGhqj0acnOmKCdGzJdmdGuzOITESeiw0+A+LCUnPiQwuWV8pyC6ISk3PjQou6utJzCqBVkrbXCrbN+aHC4rbpMdxRSdryhMHsrD7OUmmbdPbMxM9+qd+Tvluus7kydFWSftS0nZlC6bppABpAwpuK3cX1VhbmtMTnLyEY7xpKY1SwokIwSjDTqQF8ubIEk7IwW8BR+6BWJuT0kg6kq0KCSlFIJrui6B9E0+Hjdwei6g+DqTLKT/Dezr2+9VCYQ/YmnG0awanhOY1uJGtKhLqIH3UXkpJbh9NBtlG5Kp/nDtcYPOpk55wk5C0PM7HlCNqg949+N+IMySmKD5OiAv6jYm97vj6xHDjH+oq2HyBurQizhhPsGrqHTRt4ZQMn5AJcDrnkkj6fAjken037IS2ERRbTjAz+mN4QoZ8KUmhJC9g+47Dcr8YcaQNt53Js12Degli6/MqxKadvoIzcqAGoFfWi+NuAoUNXuMKnr++UGVVGt3gxAWbm7ik+OBf2cHaDzlQQFPcv21+dJ8sckP7vy8KvmpjMg2yQBwns0v06J43fk7m2Qwdi4lT55ZittnW8e5AY/MmjruZmIXOrku5/QJsFAZFTlUGTlwira8A368J/ey2pepw2B0Wbpx4e45494xxlRUHqUMVT+MbhRkjAomq26AajtA/JL+pEQ/LRO8BKU9bV+p/dv3Ir5ZKsq4MC3gL4QGh/wks54E6zHqlhfdqy9GyCTi3wVtZF1v0lz4yooQcickxZSQHgOhCFHj507RBsIbNsSNwYWPT95Wn/0bLQz5OdtuaEkGsPmsRlDF8lFCkugtxtnxZmCnRaRXG4O5ORj03Hm4CyLCL/+LPKUCwpeKdxW7OPG13dZhNETfNg/OkKwb7IDbGQZlYRhcj2hgNsTby7iW+NUPOGHiaGk7aFskYfM8XDJWXjlhzAz9oIZkZSFabE3w5pghZ+ndZNUeF2OEtIBJuvPjrCqFSH5tIAkfbBpY25iVaYiJfhaCCZvM14fnHMtnQQ6zgRkY2Z8uz/XoUSiD22K1A1vfDZT2jb7bR5WB9TzX7HiXZLLq5ijUMF7BV67+MpTeY6JsOK8+qAQJ1rZ6G9UhguQsidUQzfBbDa2eYHemeAK9BipvO2Oh7lqPANVpBA04vSEXGP1qvBxCvqr3qbkdwCpcH9T0X6gylmJ1AR9fGHAdunbjZdz1yTKS1ganwxYFpJOXw50UBD/8FYK/09sdao7WIvPo2z1tsFcCDhtBWVhXRHXEc7jYhpKEszBOmzuo5XIrKADF/qzGrvMbrRCJS9ngKNnGz7ONe0gNOCqyjfvym60D0RmF4hHMFmE2srNu7PqPpZc+pJYICwScx6/ilG76m2MiAsUdAFHgfG3OMW+bowJa4hw5AoNRteQ2tqLcaJskcsalVlZQ8oMqzQbnSHr2lQg6mxKfnxEBVazRl5cGaNJK0gIq8SoMHJ5YVWMoI770MR9WJOaVVaKzXCILDpJRLw9LNLuvCim5Ef++JFHD8V8G+Yh+a9NR8gxDgxXaMMTSsnfcEPHKV6SrShFcxFIVJ5g5TCE5mYfLkZxxp7OVNLfhZGOY2XcluTMaBqzkd4Bw0+QY/WYFLslfL2yl/EkZvmKa+gnQn5+ocC9U4G/hxuqbZpUye9LhtSsTUz3vs4KPsBhv/FifwIoh4mY0mO9kg1QZolxa/vi10YGBB1zg40vRdcz10q9dEJVYOBSqflQXnKTsob5y9QbPKyW95as4YfhKGOR+g/1KW/f/gkF1lQKViN4SwGx3yf1/FsebATo64x9fZYX/0mQGFGQNVofIr26NeXFO8P1YQHWWAMgnyXVx5HrwY6c6JtejD+rEHYzOys4Xu3KMSHBTj77BMdeEBHnM5lgE8+xgBb8/i76wk4MCdXbQ5KSrBF+plNZcGtNaPgCeME0wu0VrUp5idendI1oZ4OPOATkP+0b95ksxGwt/OzdYfD4Mu1MKfj/RY5CkPYPRcFG8zXzwnAaKpEM/nuFfcI7I10a1x2Pz9B/Ax9//fjdROP39WB7oRXSWnq4dKxOlMbrtQmRmqSIeIM2WuU1zWZ8wGDvZzNHwfR1xr6m/NulJ5g1Zg/TWy0vhuJn/J/N3xPWLdkle9ZlF7FUH/xY4K4RVYPif5EnRyJOggccTVOev7yC4dYqat0iZd12x+/L6ebCS4umg3eO9METIk6M0mnALxpXt/D631zl+6BK+HP/5/RC68rxpKXUs/DrCrrDvJ7KPnncIEh75syeX8+BGfZnM8DzUzd5sNv1fZoBL6X6ruZwfUdnuLKxJUzbPl/xb+BKYOJqgwDVAgvuu15OlePA+y6VE0C7k+VEMOzYqcmguVxOdd5xjWaZcwKv4cGh/ijIA7HgslsoJ4AKM+VE0GnaJYOSvO3FzkGus5ywNOdkOXHpnmMueekCbf4DEu/bwlnimyLhFmCwSLgFeMdiYzIA22tAjFaVVpVWlVaV2vFlMWsnIbUP0NXAqhBBv9gaE7PfdCar6bVyKnh36S3RzChb/ULT8NIfqj62Y/6WQO+TF+l9tiK9L5kzbAss0ir5thdlYKoFGpNoUJy8BW3cD8anm7Xg7psuaLqguMAwc4ZPrdbTNuBbVH9KKgaNiVYkkRN97faay331HvqVmW2v/h9L9P0AGtihwSMa+gc0fEEja0Cj12hsDLKNb4BqdvfGh3F1j7pX29frH5PYD2MfGNoHpf0Z7ENgT8pD2f38caQ9zx+IvbTv+cP4/ifBBzJ8kPyZFofgyQx0TEB47h77hZSQ1js+B25Sdd0Gw0Cy5B2AakkfB5AjSEtDJQrKNdR74GkU7UE28Xh9PwJG/n5cWKzLerFrBPK7mwX6DQZ8N0JAAFAAlF8CufWOQ12nblL7ZjeVHnkt34/fs7BnsLvpZt1pdbM6vPvj6EA8rf/kNtU/eX31ht5UPD+b2nVFd9OiukntU6d0QIxjFtRNap8OTwbk89SwtLGq+5bqU3Vudq8ReRfp//+JhJbcqjFDg+pTdU4vl5KAOJ4xCsQBM6RcCqPTmvbafpfN0wrOnC6J5ZSyb019qs6pr/d9F7n8repDbdVv7ZvDcSEg2KXm9y1qM0e4smU9iwbklJ4hNE/Rc4CkpZ1yeK10wlcN6YxyrJfMtCwuy3C7ba6exl6d1dnJD4hW2QwNxOHsADetKzv2r3cun2zJvKp8jAO5ooRAuU+CLt8B+HLS8if7OzzdRREISutmIV2HXWWU2Ayed7ifEEm5ypAqtxEmbUc/Fi9PUKqhfFbDFkGe5zJyWeJHK+BeA8Uoe/k54F5cc5JsLLeIXY47cVh8s5h5lkHH/w2mEMjqhw4CJOXt0TMmIif/w8Dh3wF8fF+bBvDVTdfp4vv/75X4Ow0GBQYggFUZrRdmAjjn/s5q+0s4WjaJqB/szlnOm9qVjqE3k+9Gh9EPm5Bqvi+eFLXv4PYEeqK3/D3LOoleLt7tgM55YaC5jvDNuAv4bU3azWm53jJtsFlEitmLw9ImJdyXzIMNu98Osu2ESt+ybjT/TeyjBYhJACRZCC0DMZWTw83I5n2URdBZAhcipPDfFh4VsoTvb4e02OA5GNcMVzTZXHmI/mJ1SRaMKbwrSk4gmzdY3tjW2MNnmz0Z2dKJbpXgGjeR7QQI0dYd3aoEKu5AHlNeZsQ5shwpFXJIYC6SVreusYMeAsugqToI6iOlbSjNwmkdIRBo04QNOoSjPMZEweLBThK/7IOOD8Hj1P7Nmi3lGU4GBWYaPfvx00iGAiFKoB8vQIRUmBAPNYywIgGxCEckzMiFNpvd1kpuO8NwV9j0L0i8BvkHKnBLi8ECcjG610kiTMi60lkGpKVnlvilkyyXpPUBQqrnNJregHVJMzQqrJdSnA7zAFy+eVYLzBriCgSeTox6bjd8CxE7OPIHUrOJ0RP6Pa7jgINVb+RIwkoiUvSxuAsBcL8NK0g24lc536qgsw+n6RB5gGGQtHlJgN0UwXSo5eDxksov/6DnDa/KEONvQU0RmP+JbsfMrRd2ITh9hZR2wvpNHJcob8juIXcypbrL8qDiIX5jyQPQ/uEA/n8d+P9rwzXtA6Bc6PwSHcXIjWwBS1/kZuZB1f7gHi45K+vkJ1FOZuUObIhPwvwwR5+U+WSiT8T44r4+EBAt2aGYIUB2LmTHOrb341SwALgbu4ch3ESHYQghCcOl+iGMEOpMGMnbzjCKxIowSTR9mAIndWcqPu7uIABqo82EuMOvJcgbDTBelzYtiik1qlPGpVy1SlXaMh6fQZuUdUkuTcnGAcsq+do0SRQhQqtSLTnZRK9VuFZ6dcI1XslK62+lZZ5xBjJhdzZpSzuVa5nkNmq4Syec9Jg58kHME/8BT1zlpIU7Mt3mS9IDmURMy11LVTewyTItL2U0b965F4XPoVE+ySRpKwzZqEa5UncU2juueslkq7WTvMR2q7uVqnNOuxLmL9WoXoR0agaZVJROpOwi7swOewlSQWAL8C/oNpn9EYyWgM4uBwYuKXFAqYPWCSBWJtD3JMp94YqrggQLEeqa627477qjUSNVkLnpli3+jvU+c0iU/4tehJRt3l1V7kmQ2DKT/SiF2lBbtxoN6m2lodVI5wd6TS+G3bxkaOVmX2rToTNw0M4SxF/IsfG62C2z3ArdtlnJI9PPHLI4jXPJ1qNPv95FS7fsJ6fkBwmhIDQ457zNtqAvdLKWId0+Hw+UDnGJR3wSkJAIIomKdJyscDPan8aiHE+ms7mp6qbt+sVytd5sd8OekE77w59eoSLzw7UPwg5C280aRYRCkxYpPIICRVLJURJpymFKF33uiKOOOW6Pvc44CwkHHrJEJToxhsxAR6xh7yUOyS8WnMAnwLNRsZ0UiYchgjVmxKQJqwwmIYkKfZekJCclqUmLPAqrPfLUfWs8pvLQEw+iByWkgtSQBtJCOkiPUpS0lHeUY6vDF/HlddhN6PaGaqksKg5eUViBDKbqCqu9tg7939wd0laBamwoX9tEW2cjYQzSOLuP9k2DUFfdMTShtboL/nDkArM38qhrqD6HsJfK3wJ9jJA6AoQTRFghQhiWApAqQKpfCijJvwUBUgeggAAiABJEBaQAAFE+Wq9MGifNZkulygRLpqOGdDRWjBVrxVnx9QksWzm61E0QXmeiSuHokCrUjJJKL0XD+pUwlR3hghrVDllkzBT1MSgLP3mUjx31xnVK5XpQlDQeW1zak2sfXl+CbauuK8tdHRZNrGpsrHW2j1YfoayxzdCOLPVjytuqwr9pzOPNB6lKdWNryLc2fewtVC5nA9WYZQ0nOP1lrIeegJaGryBWAwA=) format('woff2')}
.nm-fonts{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}
.nm-fonts button{height:58px;min-width:0;border-radius:11px;border:1px solid #34312b;background:#1d1b18;color:var(--cream);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.nm-fonts button b{font:700 22px/1 var(--display)}.nm-fonts button small{font:800 10.5px/1 var(--body);color:#a99f8e}
.nm-fonts button[aria-checked="true"]{border-color:#8a6512;background:#2a2009;color:var(--kl,#F6A801)}
:is(body.nmfont-bold :is(.nmf-c,.nmb-c,.nm-loop button,.nm-pal button),.nm-fonts .nmfont-bold) b{font-family:'Exo2NUM','Exo 2',var(--display);font-style:italic;font-weight:800;letter-spacing:-.01em}
:is(body.nmfont-clean :is(.nmf-c,.nmb-c,.nm-loop button,.nm-pal button),.nm-fonts .nmfont-clean) b{font-family:var(--body);font-weight:900;letter-spacing:-.02em}
:is(body.nmfont-screen :is(.nmf-c,.nmb-c,.nm-loop button,.nm-pal button),.nm-fonts .nmfont-screen) b{font-family:'VT323',monospace;font-weight:400;letter-spacing:.02em}
:is(body.nmfont-classic :is(.nmf-c,.nmb-c,.nm-loop button,.nm-pal button),.nm-fonts .nmfont-classic) b{font-family:Georgia,'Times New Roman',serif;font-weight:700}
body.nmfont-screen .nmf-c.now b{text-shadow:0 0 2vmin #ffb000,0 0 6vmin rgba(246,168,1,.5)}
body.nmfont-screen .nmf-c b{font-size:clamp(78px,22vmin,330px)}body.nmfont-screen .nmf-c.now b{font-size:clamp(94px,27vmin,410px)}
body.nmfont-screen .nmb-c b{font-size:42px}body.nmfont-screen .nmb-c.now b{font-size:52px}
body.solo.mob.nmfont-screen .nmb-c b{font-size:34px}body.solo.mob.nmfont-screen .nmb-c.now b{font-size:42px}
body.nmfont-screen .nm-loop button b{font-size:30px}body.nmfont-screen .nm-pal button b{font-size:22px}.nm-fonts .nmfont-screen b{font-size:28px}
/* full screen keys: Flat, Real (a real keyboard: felt, glossy blacks, ivory whites), Tilted (Real, seen from the player's seat), Dark */
.nmf-kb{--fb:0px}
.nmf.nmk-real .nmf-kb,.nmf.nmk-tilt .nmf-kb{--fb:3vmin;background:#0b0705}
.nmf .nmf-k{top:var(--fb)}.nmf .nmf-wk{height:calc(100% - var(--fb))}.nmf .nmf-bk{height:calc((100% - var(--fb))*.6)}
.nmf.nmk-real .nmf-kb::before,.nmf.nmk-tilt .nmf-kb::before{content:"";position:absolute;left:0;right:0;top:0;height:var(--fb);background:linear-gradient(180deg,#3b2414,#24150b 75%,#7a1616 75%,#5a0f0f);z-index:3}
.nmf:is(.nmk-real,.nmk-tilt) .nmf-wk{border:0;border-right:1px solid rgba(0,0,0,.28);border-radius:0 0 .7vmin .7vmin;background:linear-gradient(180deg,#d9d2c3 0%,#f6f1e6 6%,#fffdf8 60%,#f3ecdf 92%,#e2d8c6 100%);box-shadow:inset 0 -1.1vmin 0 #d8cdb8,0 .35vmin 0 #a99f8a}
.nmf:is(.nmk-real,.nmk-tilt) .nmf-bk{border-radius:0 0 .5vmin .5vmin;background:linear-gradient(180deg,#000 0%,#1c1b1a 55%,#3a3835 86%,#151413 90%,#0a0909 100%);box-shadow:inset .25vmin 0 0 rgba(255,255,255,.07),inset -.3vmin 0 0 rgba(0,0,0,.7),0 .7vmin 1.2vmin rgba(0,0,0,.55)}
.nmf:is(.nmk-real,.nmk-tilt) .nmf-wk.on{background:linear-gradient(180deg,#c98a00 0%,#F6A801 12%,#ffc94a 75%,#e89b00 100%);box-shadow:0 0 4vmin rgba(246,168,1,.6),inset 0 -.6vmin 0 #b77900}
.nmf:is(.nmk-real,.nmk-tilt) .nmf-bk.on{background:linear-gradient(180deg,#7a5200,#F6A801 70%,#c98a00);box-shadow:0 0 3vmin rgba(246,168,1,.6)}
.nmf:is(.nmk-real,.nmk-tilt) .nmf-wk.g{background:linear-gradient(180deg,#fff6dc 0%,#fffaf0 40%,#ffd978 100%);box-shadow:inset 0 0 0 .5vmin var(--yellow),inset 0 -1.1vmin 0 var(--yellow)}
.nmf.nmk-flat .nmf-kb::before{content:"";position:absolute;left:0;right:0;top:0;height:2.6vmin;z-index:3;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,0))}
.nmf.nmk-tilt .nmf-kb{height:clamp(130px,34vh,480px);overflow:visible;transform:perspective(75vmin) rotateX(30deg);transform-origin:50% 100%;border-radius:0;box-shadow:0 3vmin 5vmin rgba(0,0,0,.6)}
.nmf.nmk-tilt .nmf-main{padding-bottom:1vmin}
.nmf.nmk-dark .nmf-kb{background:#050505}
.nmf.nmk-dark .nmf-wk{background:#1b1a17;border:1px solid #3a3630;border-top:0;box-shadow:inset 0 -1vmin 0 #24221f}
.nmf.nmk-dark .nmf-bk{background:#050505;border:1px solid #2c2a26;border-top:0;box-shadow:none}
.nmf.nmk-dark .nmf-k.on{background:var(--kl,#F6A801);border-color:var(--kl,#F6A801);box-shadow:0 0 5vmin rgba(246,168,1,.75),0 0 1.5vmin rgba(246,168,1,.9)}
.nmf.nmk-dark .nmf-k.g{background:#2a2009;border-color:var(--yellow);box-shadow:inset 0 0 0 .4vmin var(--yellow),0 0 3vmin rgba(246,168,1,.35)}
@media (orientation:portrait){.nmf-c b{font-size:clamp(48px,14vw,200px)}.nmf-c.now b{font-size:clamp(56px,17vw,240px)}.nmf-kb{height:22vh}}
/* ---- EQ graph ---- */
.eq-ana{position:relative;height:98px;margin:0 0 10px;border-radius:10px;background:#0f0e0c;box-shadow:inset 0 0 0 1px #2c2a26,inset 0 2px 8px rgba(0,0,0,.7);overflow:hidden}
.eq-ana canvas{display:block;width:100%;height:100%}
.ea-ax{position:absolute;left:0;right:0;bottom:4px;height:10px;pointer-events:none}
.ea-ax i{position:absolute;transform:translateX(-50%);font:800 8.5px/1 var(--body);font-style:normal;color:#6f685c;letter-spacing:.04em}
.ea-ax i:nth-child(1){left:18.8%}.ea-ax i:nth-child(2){left:54.8%}.ea-ax i:nth-child(3){left:90.8%}
.ea-z{position:absolute;left:0;right:0;top:5px;height:10px;pointer-events:none}
.ea-z i{position:absolute;transform:translateX(-50%);font:900 8px/1 var(--body);font-style:normal;letter-spacing:.16em;text-transform:uppercase;color:#5f5950}
.ea-z i:nth-child(1){left:16.6%}.ea-z i:nth-child(2){left:54.8%}.ea-z i:nth-child(3){left:88.2%}
html.ffo-analyser:where(:not(.fft-analyser)) .eq-ana{display:none!important}
/* ---- ch1 themes (Advanced > Look > Theme). Switch: themes ---- */
body.solo[class*="th-"] .kb-wrap{isolation:isolate}
.th-fx,.th-top{position:absolute;pointer-events:none;z-index:-1}
.th-fx{inset:0;border-radius:inherit;overflow:hidden}
.th-top{left:0;right:0;top:0;height:46px;overflow:visible}
body.solo.th-band .kb-wrap{padding-top:52px!important}
@media (max-width:620px){body.solo.th-band .kb-wrap{padding-top:44px!important}}
.th-fx i{position:absolute;display:block;border-radius:50%}
@keyframes thFall{from{transform:translate3d(0,-20px,0)}to{transform:translate3d(var(--dx,10px),var(--fy,420px),0)}}
@keyframes thTw{0%,100%{opacity:var(--o1,.35)}50%{opacity:1}}
@keyframes thUp{from{transform:translate3d(0,0,0) scale(.8);opacity:0}15%{opacity:var(--o1,.5)}to{transform:translate3d(var(--dx,0),-260px,0) scale(1.1);opacity:0}}
@keyframes thBurst{0%{transform:scale(.2);opacity:0}12%{opacity:1}70%{opacity:.8}100%{transform:scale(1);opacity:0}}
.th-fx .fl{background:#fff;animation:thFall var(--d,9s) linear var(--dl,0s) infinite}
.th-top .bulb{animation:thTw var(--d,2.6s) ease-in-out var(--dl,0s) infinite}
.th-fx .st{animation:thTw var(--d,3s) ease-in-out var(--dl,0s) infinite}
.th-fx .ht{border-radius:0;background:none;animation:thUp var(--d,9s) ease-in var(--dl,0s) infinite}
.th-fx .fw{border-radius:50%;animation:thBurst var(--d,3.2s) ease-out var(--dl,0s) infinite}
/* the second set of themes: leaves and petals turning as they fall, bubbles, fireflies, smoke */
@keyframes thLeaf{from{transform:translate3d(0,-20px,0) rotate(0)}to{transform:translate3d(var(--dx,20px),var(--fy,420px),0) rotate(var(--rot,360deg))}}
@keyframes thFly{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(var(--dx,10px),var(--dy,-10px),0)}}
@keyframes thSmoke{0%,100%{transform:translate3d(0,0,0) scale(1);opacity:.0}50%{transform:translate3d(var(--dx,40px),-20px,0) scale(1.25);opacity:.5}}
@keyframes thDrift{from{transform:rotate(0) scale(1.15)}to{transform:rotate(360deg) scale(1.15)}}
@keyframes thRip{0%,100%{background-position:0 0,40px 20px}50%{background-position:60px 30px,0 50px}}
@keyframes thRays{0%,100%{opacity:.55;transform:translateX(-50%) rotate(-3deg)}50%{opacity:.9;transform:translateX(-50%) rotate(3deg)}}
@keyframes thGrid{from{background-position:0 0,0 0}to{background-position:0 34px,0 0}}
.th-fx .lf{border-radius:0;background:none;opacity:var(--o1,.7);animation:thLeaf var(--d,11s) linear var(--dl,0s) infinite}
.th-fx .bb{background:transparent;animation:thUp var(--d,9s) ease-in var(--dl,0s) infinite}
.th-fx .dt{border-radius:50%;filter:blur(.5px);animation:thUp var(--d,9s) ease-in var(--dl,0s) infinite}
.th-fx .ff{background:#e8ff8a;box-shadow:0 0 8px 3px rgba(214,255,110,.55);animation:thTw var(--d,3s) ease-in-out var(--dl,0s) infinite,thFly var(--d2,8s) ease-in-out var(--dl,0s) infinite}
.th-fx .smk{border-radius:50%;background:radial-gradient(closest-side,rgba(230,215,200,.16),transparent);filter:blur(10px);animation:thSmoke var(--d,22s) ease-in-out var(--dl,0s) infinite}
.th-fx .jz-spot{position:absolute;left:50%;top:-10%;width:70%;height:120%;transform:translateX(-50%);background:conic-gradient(from 160deg at 50% 0,transparent 0 8deg,rgba(255,214,150,.16) 14deg 26deg,transparent 32deg 360deg);filter:blur(6px)}
.th-fx .gx-neb{position:absolute;inset:-30%;background:radial-gradient(35% 30% at 30% 40%,rgba(140,124,255,.28),transparent 70%),radial-gradient(30% 25% at 70% 60%,rgba(255,110,200,.18),transparent 70%),radial-gradient(25% 20% at 55% 25%,rgba(80,200,255,.14),transparent 70%);animation:thDrift 240s linear infinite}
.th-fx .oc-rip{position:absolute;inset:0;opacity:.5;background:radial-gradient(60px 22px at 30% 20%,rgba(160,235,255,.22),transparent 70%) 0 0/180px 90px,radial-gradient(70px 26px at 70% 60%,rgba(160,235,255,.16),transparent 70%) 0 0/220px 110px;animation:thRip 14s ease-in-out infinite}
.th-fx .oc-rip.b{opacity:.35;animation-duration:19s;animation-direction:reverse}
.th-fx .sr-rays{position:absolute;left:50%;top:-40%;width:160%;height:140%;transform:translateX(-50%);background:repeating-conic-gradient(from 180deg at 50% 0,rgba(255,226,160,.07) 0 5deg,transparent 5deg 15deg);-webkit-mask:radial-gradient(70% 80% at 50% 0,#000,transparent 75%);mask:radial-gradient(70% 80% at 50% 0,#000,transparent 75%);animation:thRays 16s ease-in-out infinite}
.th-fx .nn-sun{position:absolute;left:50%;bottom:22%;width:220px;height:110px;margin-left:-110px;border-radius:110px 110px 0 0;background:linear-gradient(180deg,#ffd36b,#ff3dcb);-webkit-mask:repeating-linear-gradient(180deg,#000 0 10px,transparent 10px 14px);mask:repeating-linear-gradient(180deg,#000 0 10px,transparent 10px 14px);opacity:.35;filter:drop-shadow(0 0 20px #ff3dcb)}
.th-fx .nn-grid{position:absolute;left:-20%;right:-20%;bottom:0;height:24%;background:linear-gradient(0deg,rgba(46,230,255,.4) 1px,transparent 1px) 0 0/100% 34px,linear-gradient(90deg,rgba(255,61,203,.35) 1px,transparent 1px) 0 0/48px 100%;transform:perspective(220px) rotateX(55deg);transform-origin:50% 100%;-webkit-mask:linear-gradient(0deg,#000 30%,transparent);mask:linear-gradient(0deg,#000 30%,transparent);animation:thGrid 3s linear infinite}
.th-top .gx-band{position:absolute;inset:0;background:radial-gradient(40% 90% at 30% 40%,rgba(164,151,255,.22),transparent 70%),radial-gradient(35% 90% at 75% 50%,rgba(255,122,198,.14),transparent 70%)}
.th-top .tws{position:absolute;display:block;width:2px;height:2px;border-radius:50%;background:#fff;animation:thTw var(--d,3s) ease-in-out var(--dl,0s) infinite;--o1:.25}
/* Effects: Light keeps half, softer; Off keeps the look and stops everything moving */
body.solo.thfx-light .th-fx i:nth-child(2n),body.solo.thfx-light .th-top .fwk:nth-child(2n){display:none}
body.solo.thfx-light .th-fx{opacity:.7}
body.solo.thfx-off .th-fx *,body.solo.thfx-off .th-top *{animation:none!important}
body.solo.thfx-off .th-fx i:not(.st):not(.ff),body.solo.thfx-off .th-top .fwk{display:none!important}
/* bands, walkers and kids' extras */
body.solo.th-band.th-band-xl .kb-wrap{padding-top:78px!important}
@media (max-width:620px){body.solo.th-band.th-band-xl .kb-wrap{padding-top:66px!important}}
body.solo.th-band-xl .th-top{height:72px}@media (max-width:620px){body.solo.th-band-xl .th-top{height:62px}}
@media (max-height:860px) and (min-width:621px),(max-width:620px) and (max-height:699px){body.solo.th-band.th-band-xl .kb-wrap{padding-top:52px!important}body.solo.th-band-xl .th-top{height:46px}}
@media (max-width:620px) and (max-height:699px){body.solo.th-band.th-band-xl .kb-wrap{padding-top:44px!important}}
.th-top .gi{position:absolute;display:block;line-height:0;transform:translateX(-50%);animation:thSway var(--d,3.4s) ease-in-out var(--dl,0s) infinite;transform-origin:50% 0}
.th-top .gi.bob{animation-name:thBob}.th-top .gi.lt svg{filter:drop-shadow(0 0 8px rgba(255,75,92,.6))}
@keyframes thSway{0%,100%{transform:translateX(-50%) rotate(-4deg)}50%{transform:translateX(-50%) rotate(4deg)}}
@keyframes thBob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-5px)}}
.th-top .wk{position:absolute;left:0;display:block;line-height:0;animation:thWalk var(--t,40s) linear var(--dl,0s) infinite}
.th-top .wk.rev{animation-direction:reverse}.th-top .wk.rev>svg{transform:scaleX(-1)}
.th-top .wk>svg{animation:thStep .5s ease-in-out infinite alternate}
@keyframes thWalk{from{transform:translateX(-90px)}to{transform:translateX(calc(var(--W,1200px) + 90px))}}
@keyframes thStep{from{translate:0 0}to{translate:0 -2px}}
.th-top .wk .flm{transform-origin:13px 15px;animation:thFlame .18s ease-in-out infinite alternate}
@keyframes thFlame{from{transform:scaleX(.75)}to{transform:scaleX(1.15)}}
body.solo.thfx-off .th-top .wk{transform:translateX(var(--x0,0))}
.th-top{overflow-x:clip}
.th-fx .spk{width:4px!important;height:9px!important;border-radius:2px!important;animation:thLeaf var(--d,9s) linear var(--dl,0s) infinite}
.th-fx .rn{width:1.2px!important;height:22px!important;border-radius:1px!important;animation:thFall var(--d,1.2s) linear var(--dl,0s) infinite}
.th-fx .sh{width:90px!important;height:1.6px!important;border-radius:2px!important;background:linear-gradient(90deg,transparent,#fff);transform:rotate(-24deg);opacity:0;animation:thShoot var(--d,8s) ease-in var(--dl,0s) infinite}
@keyframes thShoot{0%,88%{opacity:0;translate:0 0}90%{opacity:1}100%{opacity:0;translate:180px 80px}}
.th-top .sk-moon{position:absolute;right:14%;top:4px;width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 40% 40%,#fff7fb,#ffd9e8 60%,#f0a8c8);box-shadow:0 0 24px 8px rgba(255,200,225,.3);opacity:.9}
.th-top .nn-tube{position:absolute;left:24px;right:24px;height:3px;border-radius:3px;background:#ff3dcb;box-shadow:0 0 6px #ff3dcb,0 0 16px #ff3dcb;animation:thNeon 6s steps(1) infinite}.th-top .nn-tube.c{left:60px;right:60px;background:#2ee6ff;box-shadow:0 0 6px #2ee6ff,0 0 16px #2ee6ff;animation-delay:-2.3s}
.th-top .nn-sign{position:absolute;left:50%;top:2px;transform:translateX(-50%);font:900 30px/1 var(--body);color:#fff;text-shadow:0 0 4px #ff3dcb,0 0 12px #ff3dcb,0 0 24px #ff3dcb}
@keyframes thNeon{0%,100%{opacity:1}47%{opacity:1}48%{opacity:.35}49%{opacity:1}51%{opacity:.5}52%{opacity:1}}
.th-top .nfl{animation:thNeon 5s steps(1) infinite}
.th-top .sr-sun{position:absolute;left:50%;top:10px;width:64px;height:32px;margin-left:-32px;border-radius:32px 32px 0 0;background:radial-gradient(circle at 50% 100%,#fff6dc 0 45%,#ffd58a 75%,#f2b45a);box-shadow:0 -6px 26px 4px rgba(255,213,138,.3)}
.th-top .sr-sun::after{content:"";position:absolute;left:-60px;right:-60px;bottom:0;height:1.5px;background:linear-gradient(90deg,transparent,rgba(255,226,160,.7),transparent)}
.th-top .tc-band{position:absolute;left:0;right:0;top:12px;display:flex;align-items:center;justify-content:center;gap:14px}
.th-top .tc-band i{display:block;width:120px;height:2px;background:linear-gradient(90deg,transparent,#F6A801)}.th-top .tc-band b::first-letter{color:#F6A801}.th-top .tc-band i:last-child{transform:scaleX(-1)}
.th-top .tc-band b{font:700 13px/1 'Fredoka',var(--body);letter-spacing:.32em;color:#FBF6EC;text-shadow:0 0 10px rgba(246,168,1,.35);white-space:nowrap}
@media (max-width:620px){.th-top .sr-sun{top:8px;width:48px;height:24px;margin-left:-24px}.th-top .tc-band{top:10px;gap:8px}.th-top .tc-band i{width:36px}.th-top .tc-band b{font-size:11px;letter-spacing:.22em}}
/* key pops */
.th-pops{position:fixed;inset:0;pointer-events:none;z-index:60;overflow:hidden}
.th-pops i{position:absolute;font-style:normal;line-height:1;transform:translate(-50%,-50%);animation:thPop 1.1s cubic-bezier(.2,.8,.3,1) forwards;filter:drop-shadow(0 3px 4px rgba(0,0,0,.35))}
@keyframes thPop{0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}15%{opacity:1;transform:translate(-50%,-90%) scale(1.15)}100%{opacity:0;transform:translate(calc(-50% + var(--dx,0px)),-420%) scale(.9) rotate(var(--rot,0deg))}}
@media (prefers-reduced-motion:reduce){.th-top *{animation:none!important}}
/* every theme lets its world show softly through the panels (they stay dark, so the words keep their contrast) */
/* themes: the small labels sit on coloured cases, so they get a little brighter than on Classic */
html body.solo[class*=" th-"] :is(.jy small,.mob-lab,.mob-lab span){color:#cfc6b4!important}
html body.solo[class*=" th-"] .kb-wrap>:is(.pw-sw,.kp-sw,.psz-sw) .pw-lab{color:#bdb4a2!important}
html body.solo[class*=" th-"] :is(.pad-nm,#epName){color:#e2dacb!important}
html:not(.ffo-clock:where(:not(.fft-clock))) body.solo[class*=" th-"] .jy .jy-clock{opacity:.85;background:rgba(0,0,0,.45)}
html body.solo[class*=" th-"]:not(.mob) .kb-switches{background:rgba(8,7,6,.5);border-radius:16px;box-shadow:0 0 0 4px rgba(8,7,6,.5)}
html body.solo.mob[class*=" th-"] :is(.mob-lab,.mob-chips){background:rgba(8,7,6,.42);border-radius:12px;box-shadow:0 0 0 4px rgba(8,7,6,.42)}
html body.solo[class*=" th-"] #kbTools{background:rgba(8,7,6,.38);border-radius:18px;box-shadow:0 0 0 4px rgba(8,7,6,.38)}
/* the phone Sounds row and other amber bits take the theme's colour */
body.solo.mob[class*=" th-"] .kb-wrap .mob-chip.on i{background:var(--yellow);box-shadow:0 0 8px var(--yellow)}
body.solo.mob[class*=" th-"] .kb-wrap .mob-chip.on{border-color:color-mix(in srgb,var(--yellow) 45%,#222);background:linear-gradient(180deg,color-mix(in srgb,var(--yellow) 16%,#161412),#141210)}
body.solo.mob[class*=" th-"] .kb-wrap .mob-chip.sel{box-shadow:inset 0 0 0 2px var(--yellow)}
body.solo.mob[class*=" th-"] .kb-wrap .mob-add{color:var(--yellow);border-color:color-mix(in srgb,var(--yellow) 40%,#222)}
body.solo[class*=" th-"] .rig-panel .mix-strip{background:linear-gradient(rgba(38,35,30,.88),rgba(24,22,19,.92))!important}
@media (prefers-reduced-motion:reduce){.th-fx *,.th-top *{animation:none!important}}
/* Christmas: pine case, candy-cane cheeks, a string of lights and snow */
body.solo.th-christmas .kb-wrap{--yellow:#F4C542;background:linear-gradient(180deg,#123222 0%,#0b2017 40%,#07140e 100%)!important;box-shadow:0 40px 80px -20px rgba(0,0,0,.8),0 0 0 1px #1f4a33,inset 0 1px 0 rgba(255,255,255,.07)!important}
body.solo.th-christmas .kb-wrap::before,body.solo.th-christmas .kb-wrap::after{background:repeating-linear-gradient(135deg,#f3efe6 0 10px,#c8202b 10px 20px)!important}
/* Winter: icy blue case, frosted corners, brushed silver cheeks, snow */
body.solo.th-winter .kb-wrap{--yellow:#8FD6FF;background:linear-gradient(180deg,#22324a 0%,#152234 40%,#0c1522 100%)!important;box-shadow:0 40px 80px -20px rgba(0,0,0,.8),0 0 0 1px #34506f,inset 0 1px 0 rgba(255,255,255,.1)!important}
body.solo.th-winter .kb-wrap::before,body.solo.th-winter .kb-wrap::after{background:repeating-linear-gradient(90deg,rgba(255,255,255,.08) 0 2px,transparent 2px 7px),linear-gradient(180deg,#e9eef3,#c3ccd6 55%,#9aa6b3)!important}
/* Summer: deep teal case, sand cheeks, a warm sun and a little surf */
body.solo.th-summer .kb-wrap{--yellow:#FF8A3D;background:linear-gradient(180deg,#123a40 0%,#0d2a2f 45%,#08191c 100%)!important;box-shadow:0 40px 80px -20px rgba(0,0,0,.8),0 0 0 1px #1f565c,inset 0 1px 0 rgba(255,255,255,.08)!important}
body.solo.th-summer .kb-wrap::before,body.solo.th-summer .kb-wrap::after{background:repeating-linear-gradient(90deg,rgba(0,0,0,.06) 0 2px,transparent 2px 6px),linear-gradient(180deg,#e2c48f,#c9a46a 55%,#a7834b)!important}
/* Ramadan & Eid: night-sky case, lanterns, a crescent and stars, dark wood with gold inlay */
body.solo.th-ramadan .kb-wrap{--yellow:#E9C46A;background:linear-gradient(180deg,#221b3d 0%,#16112b 42%,#0d0a1c 100%)!important;box-shadow:0 40px 80px -20px rgba(0,0,0,.8),0 0 0 1px #3a2f62,inset 0 1px 0 rgba(255,255,255,.07)!important}
body.solo.th-ramadan .kb-wrap::before,body.solo.th-ramadan .kb-wrap::after{background:repeating-linear-gradient(180deg,transparent 0 22px,rgba(233,196,106,.35) 22px 23px),linear-gradient(180deg,#3b2417,#26170e 55%,#180e08)!important}
/* Valentine's: deep wine case, rose-gold cheeks, hearts drifting up */
body.solo.th-valentine .kb-wrap{--yellow:#FF6F96;background:linear-gradient(180deg,#3a1222 0%,#270b17 42%,#16060d 100%)!important;box-shadow:0 40px 80px -20px rgba(0,0,0,.8),0 0 0 1px #5c2238,inset 0 1px 0 rgba(255,255,255,.07)!important}
body.solo.th-valentine .kb-wrap::before,body.solo.th-valentine .kb-wrap::after{background:linear-gradient(180deg,#f2c2b0,#d99a86 55%,#b8735f)!important}
/* UAE National Day: flag cheeks (green, white, black with the red band), gold fireworks over the top */
body.solo.th-national .kb-wrap{background:linear-gradient(180deg,#1d2620 0%,#121915 42%,#0b0f0c 100%)!important;box-shadow:0 40px 80px -20px rgba(0,0,0,.8),0 0 0 1px #2c3a30,inset 0 1px 0 rgba(255,255,255,.07)!important}
body.solo.th-national .kb-wrap::before,body.solo.th-national .kb-wrap::after{background:linear-gradient(180deg,#00843D 0 33.3%,#f4f4f2 33.3% 66.6%,#111 66.6%)!important}
body.solo.th-national .kb-wrap::before{box-shadow:inset 7px 0 0 #C8102E!important}body.solo.th-national .kb-wrap::after{box-shadow:inset -7px 0 0 #C8102E!important}
/* the second set (switch: themes2). Each: the case, its cheeks, and the accent colour */
body.solo:is(.th-newyear,.th-autumn,.th-spring,.th-easter,.th-neon,.th-jazz,.th-galaxy,.th-ocean,.th-forest,.th-sunrise,.th-tch) .kb-wrap{box-shadow:0 40px 80px -20px rgba(0,0,0,.8),0 0 0 1px var(--th-ring,#333),inset 0 1px 0 rgba(255,255,255,.08)!important}
/* New Year's Eve: midnight blue, champagne-gold cheeks, fireworks over the top */
body.solo.th-newyear .kb-wrap{--yellow:#F2C14E;--th-ring:#2a3a78;background:linear-gradient(180deg,#16204a 0%,#0c1330 42%,#060914 100%)!important}
body.solo.th-newyear .kb-wrap::before,body.solo.th-newyear .kb-wrap::after{background:repeating-linear-gradient(90deg,rgba(255,255,255,.1) 0 1px,transparent 1px 5px),linear-gradient(180deg,#f3dc9a,#d9b25a 55%,#a67f2c)!important}
/* Autumn: rust-brown case, oak cheeks, leaves turning as they fall */
body.solo.th-autumn .kb-wrap{--yellow:#E8833A;--th-ring:#5a3220;background:linear-gradient(180deg,#3a2214 0%,#26160c 42%,#160c06 100%)!important}
body.solo.th-autumn .kb-wrap::before,body.solo.th-autumn .kb-wrap::after{background:repeating-linear-gradient(90deg,rgba(0,0,0,.08) 0 2px,transparent 2px 7px),linear-gradient(180deg,#c98a4b,#a4612c 55%,#7a4219)!important}
/* Spring: fresh deep green, pale birch cheeks, blossom petals */
body.solo.th-spring .kb-wrap{--yellow:#8EE06A;--th-ring:#2f5a42;background:linear-gradient(180deg,#1f3a2c 0%,#15291f 42%,#0b1811 100%)!important}
body.solo.th-spring .kb-wrap::before,body.solo.th-spring .kb-wrap::after{background:radial-gradient(ellipse 4px 1.5px at 30% 20%,rgba(50,40,30,.55) 98%,transparent) 0 0/100% 47px,radial-gradient(ellipse 5px 1.5px at 70% 60%,rgba(50,40,30,.45) 98%,transparent) 0 0/100% 61px,linear-gradient(90deg,#e9e4d8,#f6f2e8 50%,#d8d0bf)!important}
/* Easter: soft dusk lavender, pastel striped cheeks, pastel eggs and light */
body.solo.th-easter .kb-wrap{--yellow:#B79CFF;--th-ring:#45396a;background:linear-gradient(180deg,#2b2440 0%,#1d182d 42%,#14111f 100%)!important}
body.solo.th-easter .kb-wrap::before,body.solo.th-easter .kb-wrap::after{background:linear-gradient(180deg,#ffd6e8 0 25%,#d8ccff 25% 50%,#c9f0dc 50% 75%,#fff1b8 75%)!important}
/* Neon Night: black case with a pink and cyan glow, a synthwave sun and grid */
body.solo.th-neon .kb-wrap{--yellow:#FF3DCB;--th-ring:#ff3dcb;background:linear-gradient(180deg,#1a0838 0%,#0e0520 42%,#05030b 100%)!important;box-shadow:0 40px 80px -20px rgba(0,0,0,.8),0 0 0 1px #ff3dcb,0 0 24px rgba(255,61,203,.35),inset 0 1px 0 rgba(46,230,255,.35)!important}
body.solo.th-neon .kb-wrap::before,body.solo.th-neon .kb-wrap::after{background:linear-gradient(180deg,#14141a,#08080c)!important}
body.solo.th-neon .kb-wrap::before{box-shadow:inset -2px 0 0 #2ee6ff,0 0 14px rgba(46,230,255,.5)!important}body.solo.th-neon .kb-wrap::after{box-shadow:inset 2px 0 0 #2ee6ff,0 0 14px rgba(46,230,255,.5)!important}
/* Jazz Club: deep burgundy, walnut cheeks with a brass line, a warm spotlight through smoke */
body.solo.th-jazz .kb-wrap{--yellow:#E3A857;--th-ring:#5a2430;background:linear-gradient(180deg,#2a0f14 0%,#1c090d 42%,#120507 100%)!important}
body.solo.th-jazz .kb-wrap::before,body.solo.th-jazz .kb-wrap::after{background:repeating-linear-gradient(90deg,rgba(0,0,0,.12) 0 2px,transparent 2px 6px),linear-gradient(180deg,#4a2c1c,#2e1a10 55%,#1a0e08)!important}
/* Galaxy: deep space, star-dusted cheeks, slow nebula and stars */
body.solo.th-galaxy .kb-wrap{--yellow:#A497FF;--th-ring:#2c2a6a;background:linear-gradient(180deg,#0a0b1f 0%,#070818 42%,#030312 100%)!important}
body.solo.th-galaxy .kb-wrap::before,body.solo.th-galaxy .kb-wrap::after{background:radial-gradient(circle at 30% 20%,#fff 0 1px,transparent 1.5px) 0 0/14px 17px,radial-gradient(circle at 70% 60%,#c8beff 0 1px,transparent 1.5px) 0 0/19px 13px,linear-gradient(180deg,#1b1840,#0d0b24)!important}
/* Ocean: deep blue, driftwood cheeks, light ripples and bubbles */
body.solo.th-ocean .kb-wrap{--yellow:#38C8E8;--th-ring:#11506b;background:linear-gradient(180deg,#06283a 0%,#041c2b 42%,#021320 100%)!important}
body.solo.th-ocean .kb-wrap::before,body.solo.th-ocean .kb-wrap::after{background:repeating-linear-gradient(180deg,rgba(255,255,255,.07) 0 2px,transparent 2px 9px),linear-gradient(180deg,#d6cfc2,#b5ac9b 55%,#8e8574)!important}
/* Forest: deep green canopy, bark cheeks, fireflies */
body.solo.th-forest .kb-wrap{--yellow:#B6E35A;--th-ring:#244a2a;background:linear-gradient(180deg,#0f2414 0%,#0a1a0e 42%,#06120a 100%)!important}
body.solo.th-forest .kb-wrap::before,body.solo.th-forest .kb-wrap::after{background:repeating-linear-gradient(180deg,rgba(0,0,0,.25) 0 3px,transparent 3px 9px,rgba(255,255,255,.04) 9px 10px,transparent 10px 15px),linear-gradient(180deg,#5a4532,#3e2f22 55%,#2a1f16)!important}
/* Sunrise Worship: warm charcoal, ivory cheeks, soft rays of light from above */
body.solo.th-sunrise .kb-wrap{--yellow:#FFD58A;--th-ring:#5a4430;background:linear-gradient(180deg,#2a2018 0%,#1c1510 42%,#120d09 100%)!important}
body.solo.th-sunrise .kb-wrap::before,body.solo.th-sunrise .kb-wrap::after{background:linear-gradient(180deg,#fbf6ec,#efe4cf 55%,#d9c9a8)!important}
/* Kids: bright cartoon worlds on a deep case, so every button and word stays readable */
body.solo:is(.th-candy,.th-dino,.th-space,.th-sea,.th-rainbow,.th-sakura,.th-tokyo,.th-starlit,.th-kawaii) .kb-wrap{box-shadow:0 40px 80px -20px rgba(0,0,0,.8),0 0 0 1px var(--th-ring,#333),inset 0 1px 0 rgba(255,255,255,.1)!important}
body.solo.th-candy .kb-wrap{--yellow:#FF7AC6;--th-ring:#8a2d74;background:linear-gradient(180deg,#4a1640 0%,#331029 45%,#22081c 100%)!important}
body.solo.th-candy .kb-wrap::before,body.solo.th-candy .kb-wrap::after{background:repeating-linear-gradient(135deg,#ff7ac6 0 9px,#fff4fa 9px 18px)!important}
body.solo.th-dino .kb-wrap{--yellow:#7DDB4F;--th-ring:#2f6b2a;background:linear-gradient(180deg,#1f4a1c 0%,#14310f 45%,#0b1a0a 100%)!important}
body.solo.th-dino .kb-wrap::before,body.solo.th-dino .kb-wrap::after{background:radial-gradient(circle at 50% 50%,#a8e66a 0 4px,transparent 5px) 0 0/14px 16px,linear-gradient(180deg,#ffb04a,#e08a2a 55%,#b8661a)!important}
body.solo.th-space .kb-wrap{--yellow:#5FD4FF;--th-ring:#2a3a8a;background:linear-gradient(180deg,#161d55 0%,#0d1238 45%,#070a22 100%)!important}
body.solo.th-space .kb-wrap::before,body.solo.th-space .kb-wrap::after{background:radial-gradient(circle at 50% 50%,#8a93a8 0 2px,transparent 2.5px) 0 4px/100% 24px,linear-gradient(90deg,#c9d0dc,#eef2f7 45%,#9aa3b3)!important}
body.solo.th-sea .kb-wrap{--yellow:#3DE0C8;--th-ring:#11618a;background:linear-gradient(180deg,#0b4466 0%,#062b44 45%,#03192a 100%)!important}
body.solo.th-sea .kb-wrap::before,body.solo.th-sea .kb-wrap::after{background:radial-gradient(circle at 50% 30%,#ffd0c0 0 3px,transparent 4px) 0 0/100% 22px,linear-gradient(180deg,#ff8a7a,#ff6b6b 55%,#d9474f)!important}
body.solo.th-rainbow .kb-wrap{--yellow:#FFD93D;--th-ring:#4a3a9a;background:linear-gradient(180deg,#2c2266 0%,#1c1546 45%,#120c2e 100%)!important}
body.solo.th-rainbow .kb-wrap::before,body.solo.th-rainbow .kb-wrap::after{background:linear-gradient(180deg,#ff5a5a 0 16.6%,#ffa53d 16.6% 33.3%,#ffe14d 33.3% 50%,#5fd36a 50% 66.6%,#4db2ff 66.6% 83.3%,#a77bff 83.3%)!important}
body.solo.th-sakura .kb-wrap{--yellow:#FFB7D5;--th-ring:#4a3570;background:linear-gradient(180deg,#2a1c46 0%,#1a1230 45%,#0e0a1c 100%)!important}
body.solo.th-sakura .kb-wrap::before,body.solo.th-sakura .kb-wrap::after{background:radial-gradient(circle at 50% 50%,rgba(255,183,213,.55) 0 2.5px,transparent 3px) 0 0/100% 40px,linear-gradient(180deg,#3a1418,#24090c 55%,#14050a)!important}
body.solo.th-tokyo .kb-wrap{--yellow:#2EE6FF;--th-ring:#2b2f6a;background:linear-gradient(180deg,#15183a 0%,#0c0e24 45%,#05060f 100%)!important;box-shadow:0 40px 80px -20px rgba(0,0,0,.8),0 0 0 1px #2b2f6a,0 0 22px rgba(46,230,255,.18),inset 0 1px 0 rgba(255,61,203,.3)!important}
body.solo.th-tokyo .kb-wrap::before,body.solo.th-tokyo .kb-wrap::after{background:linear-gradient(180deg,#14141c,#08080d)!important}
body.solo.th-tokyo .kb-wrap::before{box-shadow:inset -2px 0 0 #ff3dcb,0 0 12px rgba(255,61,203,.45)!important}body.solo.th-tokyo .kb-wrap::after{box-shadow:inset 2px 0 0 #2ee6ff,0 0 12px rgba(46,230,255,.45)!important}
body.solo.th-starlit .kb-wrap{--yellow:#FFB86B;--th-ring:#3a3a7a;background:linear-gradient(180deg,#1f2758 0%,#151a40 45%,#0b0e26 100%)!important}
body.solo.th-starlit .kb-wrap::before,body.solo.th-starlit .kb-wrap::after{background:linear-gradient(180deg,#24306e,#7a4a9a 55%,#ffb86b)!important}
body.solo.th-kawaii .kb-wrap{--yellow:#6FF0C8;--th-ring:#6a3a7a;background:linear-gradient(180deg,#3a2048 0%,#2a1636 45%,#1a0e24 100%)!important}
body.solo.th-kawaii .kb-wrap::before,body.solo.th-kawaii .kb-wrap::after{background:conic-gradient(#ff9ad5 0 25%,#9df0d8 0 50%,#ff9ad5 0 75%,#9df0d8 0) 0 0/16px 16px!important}
/* The Chord House: black case, TCH yellow cheeks with a black line, the ring in the corner */
body.solo.th-tch .kb-wrap{--yellow:#F6A801;--th-ring:#3a2c08;background:linear-gradient(180deg,#1b1b1b 0%,#121212 42%,#0a0a0a 100%)!important}
body.solo.th-tch .kb-wrap::before,body.solo.th-tch .kb-wrap::after{background:linear-gradient(180deg,transparent 0 47%,#111 47% 53%,transparent 53%),linear-gradient(180deg,#ffbf2e,#F6A801 55%,#c98700)!important}
/* picker */
.th-pick{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;width:100%}
.th-pick button{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 4px 7px;border-radius:12px;border:1px solid #34302a;background:#1d1b18;color:#bfb6a4;font:800 11.5px/1.15 var(--body);cursor:pointer;text-align:center;min-width:0}
.th-pick button i{display:block;width:100%;max-width:64px;height:26px;border-radius:7px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.th-pick button{box-sizing:border-box;overflow:hidden}.th-pick button>span{display:block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Seasons / Moods tabs, the calendar switch and Effects */
.th-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;width:100%;padding:4px;margin:0 0 10px;border-radius:999px;background:#1d1b18;border:1px solid #34302a;box-sizing:border-box}
.th-tabs[hidden],.th-more[hidden]{display:none!important}
.th-tabs button{height:32px;border:0;border-radius:999px;background:transparent;color:#bfb6a4;font:800 13px/1 var(--body);cursor:pointer}
.th-tabs button[aria-selected="true"]{background:var(--yellow,#F6A801);color:#111}
.th-more{width:100%;margin-top:12px;display:flex;flex-direction:column;gap:10px}
.th-auto{display:flex;align-items:flex-start;gap:10px;cursor:pointer}.th-auto input{margin:3px 0 0;width:18px;height:18px;accent-color:#F6A801;flex:none}
.th-auto b{display:block;font:800 13.5px/1.3 var(--body);color:#FBF6EC}.th-auto small{display:block;font:600 12px/1.4 var(--body);color:#a99f8e}
.th-now{font:700 12px/1.3 var(--body);color:#FFC93D}.th-now:empty{display:none}
.th-fxrow{display:flex;align-items:center;justify-content:space-between;gap:12px}.th-fxrow>span{font:900 11px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:#a99f8e}
.th-fxseg{display:grid;grid-template-columns:repeat(3,72px);gap:4px;padding:4px;border-radius:999px;background:#1d1b18;border:1px solid #34302a}
.th-fxseg button{height:28px;border:0;border-radius:999px;background:transparent;color:#bfb6a4;font:800 12.5px/1 var(--body);cursor:pointer}
.th-fxseg button[aria-checked="true"]{background:#2c2924;color:#FBF6EC;box-shadow:inset 0 0 0 1px #4a4236}
.th-tabs{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:520px){.th-pick{grid-template-columns:repeat(3,minmax(0,1fr))}} /* phones: three across, so every name fits */
@media (max-width:374px){.th-pick button{padding:8px 2px 7px}.th-pick button>span{font-size:10.5px;letter-spacing:-.01em}}
/* the rig is dark: dark scrollbars and form controls to match */
html.hx-solo{color-scheme:dark}
.th-pick button i{position:relative}.th-pick button i em{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-style:normal;font-size:17px;line-height:1;filter:drop-shadow(0 1px 2px rgba(0,0,0,.45))}
.th-pick button.th-fun:hover i em,.th-pick button.th-fun[aria-checked="true"] i em{animation:thWig .6s ease-in-out}
@keyframes thWig{0%,100%{transform:translate(-50%,-50%) rotate(0) scale(1)}30%{transform:translate(-50%,-55%) rotate(-12deg) scale(1.2)}60%{transform:translate(-50%,-50%) rotate(10deg) scale(1.1)}}
.adv-th.th-kidtab .th-pick button{border-radius:16px}
.th-dice{align-self:flex-start;margin-top:10px;height:34px;padding:0 14px;border-radius:999px;border:1px dashed #4a4236;background:transparent;color:#FBF6EC;font:800 13px/1 var(--body);cursor:pointer}
.th-dice[hidden]{display:none!important}.th-dice:hover{border-color:var(--yellow,#F6A801)}.th-dice.roll span{display:inline-block;animation:thRoll .6s ease-out}
@keyframes thRoll{from{transform:rotate(0)}to{transform:rotate(720deg)}}
.th-pick button[aria-checked="true"]{border-color:var(--yellow);color:var(--cream);box-shadow:0 0 0 2px rgba(246,168,1,.22)}
.adv-th{flex-wrap:wrap}
html.ffo-themes:where(:not(.fft-themes)) .adv-th{display:none!important}
/* ---- piano position (Look > Piano position). Switch: position ---- */
.kp-grip{display:none}
body.solo.kp-free .kp-grip{display:inline-flex;position:absolute;right:34px;top:-13px;z-index:5;align-items:center;gap:6px;height:24px;padding:0 12px;border-radius:999px;border:1px solid #4a4236;background:#1b1916;color:#cfc6b4;font:900 10px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;cursor:grab;touch-action:none;box-shadow:0 4px 12px rgba(0,0,0,.5)}
body.solo.kp-free .kp-grip:active{cursor:grabbing;color:var(--yellow);border-color:#6b5320}
body.solo .kb-wrap.kp-moved{transition:none}
html.ffo-position:where(:not(.fft-position)) .adv-kp{display:none!important}
/* the position switch on the case: top left, the twin of the power switch */
.kp-sw{display:none}
html:not(.ffo-position:where(:not(.fft-position))) body.solo.kp-hump .kb-wrap>.kp-sw{display:flex;align-items:center;gap:8px;position:absolute;top:-30px;left:64px;z-index:42;height:32px;padding:0 10px 2px 14px;border-radius:12px 12px 0 0;
background:linear-gradient(180deg,#34312c 0%,#2a2825 60%,#262421 100%);border:1px solid #3a3731;border-bottom:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 -6px 14px -6px rgba(0,0,0,.6)}
html:not(.ffo-position:where(:not(.fft-position))) body.solo.kp-hump .kb-wrap>.kp-sw::before,html:not(.ffo-position:where(:not(.fft-position))) body.solo.kp-hump .kb-wrap>.kp-sw::after{content:"";position:absolute;bottom:0;width:12px;height:12px}
html:not(.ffo-position:where(:not(.fft-position))) body.solo.kp-hump .kb-wrap>.kp-sw::before{left:-12px;background:radial-gradient(circle at 0 0,transparent 11px,#262421 12px)}
html:not(.ffo-position:where(:not(.fft-position))) body.solo.kp-hump .kb-wrap>.kp-sw::after{right:-12px;background:radial-gradient(circle at 100% 0,transparent 11px,#262421 12px)}
.kp-sw .pw-lab{text-transform:uppercase}
.kp-seg{display:flex;gap:2px;padding:2px;border-radius:6px;background:linear-gradient(#060505,#151412);box-shadow:inset 0 2px 3px rgba(0,0,0,.9),0 1px 0 rgba(255,255,255,.08)}
.kp-seg button{width:26px;height:20px;border:0;border-radius:4px;background:transparent;color:#7d7566;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:background .15s,color .15s}
.kp-seg button:hover{color:#cfc6b4}
.kp-seg button[aria-checked="true"]{background:linear-gradient(#3d3934,#2a2723);color:var(--kl,#F6A801);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 1px 2px rgba(0,0,0,.7)}
.kp-seg button:focus-visible,.kp-fx:focus-visible{outline:2px solid var(--kl,#F6A801);outline-offset:2px}
.kp-fx{display:none}
body.solo .kp-fx .kp-fx-out,body.solo.fs-on .kp-fx .kp-fx-in{display:none}body.solo.fs-on .kp-fx .kp-fx-out{display:block}
body.solo:not(.mob) .kp-sw .kp-fx{display:flex;align-items:center;justify-content:center;width:26px;height:22px;border:1px solid #3a3731;border-radius:6px;background:#1b1916;color:#cfc6b4;cursor:pointer;padding:0;margin-left:2px}
body.solo.fs-on .kp-sw .kp-fx:hover{color:var(--kl,#F6A801);border-color:var(--kl,#F6A801)}
body.solo.fs-on.kp-hump .fs-exit{display:none!important} /* in full screen the way out lives on the case */
body.solo.kp-hump .kp-sw .kp-grip{display:none}
body.solo.kp-hump.kp-free .kp-sw .kp-grip{display:inline-flex!important;position:static!important;height:22px!important;padding:0 8px!important;margin-left:2px;border-radius:6px!important;width:auto!important}
body.solo.kp-hump.kp-free .kp-sw .kp-grip .kp-w{display:none!important}
/* the two tabs are cut from the case itself: same colour and edge as the case top, the case's edge line runs on round their curved
shoulders, and the Move grip is gone (the Move freely button is the handle: hold it and drag) */
html:not(.ffo-power:where(:not(.fft-power))) body.solo .kb-wrap>.pw-sw .pw-lab,html:not(.ffo-position:where(:not(.fft-position))) body.solo.kp-hump .kb-wrap>.kp-sw .pw-lab,html:not(.ffo-thin:where(:not(.fft-thin))) body.solo:not(.mob) .kb-wrap>.psz-sw .pw-lab{color:var(--case-ink,#8a8170)}
html:not(.ffo-thin:where(:not(.fft-thin))) body.solo:not(.mob) .kb-wrap>.psz-sw{background:linear-gradient(180deg,color-mix(in srgb,var(--case-top,#262421),#fff 3%) 0%,var(--case-top,#262421) 100%);border-color:color-mix(in srgb,var(--case-top,#262421),#fff 5%)}
html:not(.ffo-thin:where(:not(.fft-thin))) body.solo:not(.mob) .kb-wrap>.psz-sw::before{background:radial-gradient(circle at 0 0,transparent 11.5px,var(--case-top,#262421) 12.5px)}
html:not(.ffo-thin:where(:not(.fft-thin))) body.solo:not(.mob) .kb-wrap>.psz-sw::after{background:radial-gradient(circle at 100% 0,transparent 11.5px,var(--case-top,#262421) 12.5px)}
html:not(.ffo-power:where(:not(.fft-power))) body.solo .kb-wrap>.pw-sw,html:not(.ffo-position:where(:not(.fft-position))) body.solo.kp-hump .kb-wrap>.kp-sw{background:linear-gradient(180deg,color-mix(in srgb,var(--case-top,#262421),#fff 3%) 0%,var(--case-top,#262421) 100%)!important;border-color:color-mix(in srgb,var(--case-top,#262421),#fff 5%)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 -8px 16px -8px rgba(0,0,0,.55)!important}
html:not(.ffo-power:where(:not(.fft-power))) body.solo .kb-wrap>.pw-sw::before,html:not(.ffo-position:where(:not(.fft-position))) body.solo.kp-hump .kb-wrap>.kp-sw::before{left:-12px!important;bottom:0!important;background:radial-gradient(circle at 0 0,transparent 11.5px,var(--case-top,#262421) 12.5px)!important}
html:not(.ffo-power:where(:not(.fft-power))) body.solo .kb-wrap>.pw-sw::after,html:not(.ffo-position:where(:not(.fft-position))) body.solo.kp-hump .kb-wrap>.kp-sw::after{right:-12px!important;left:auto!important;bottom:0!important;background:radial-gradient(circle at 100% 0,transparent 11.5px,var(--case-top,#262421) 12.5px)!important}
/* the tabs sit behind the case: the case's own top edge runs straight across in front of them */
.kb-edge{display:none}
body.solo:is(.kp-hump,:not(.x)) .kb-wrap>.kb-edge{display:block;position:absolute;left:16px;right:16px;top:0;height:2px;z-index:43;pointer-events:none;border-top:1px solid color-mix(in srgb,var(--case-top,#262421),#fff 5%);box-shadow:inset 0 1px 0 rgba(255,255,255,.05);background:var(--case-top,#262421)}
body.solo.mob .kb-wrap>.kb-edge{display:none}
body.solo.kp-hump .kp-sw .kp-grip,body.solo.kp-hump.kp-free .kp-sw .kp-grip{display:none!important}
body.solo.kp-hump .kp-sw [data-kp="free"]{cursor:grab;touch-action:none}body.solo.kp-hump.kp-dragging,body.solo.kp-hump.kp-dragging *{cursor:grabbing!important}
body.kp-small .adv-kp{display:none!important}
/* ---- text blocks (Look > Text on screen). Switch: textblocks ---- */
.tx{position:absolute;z-index:55;min-width:40px;max-width:min(80vw,900px);padding:4px 10px;border-radius:12px;line-height:1.15;white-space:pre-wrap;overflow-wrap:anywhere}
.tx.bx{background:rgba(12,11,10,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 6px 18px rgba(0,0,0,.35)}
.tx-t{display:block;outline:none;min-height:1em;cursor:text}
.tx-t:empty::before{content:"Type here";opacity:.45}
.tx:hover,.tx.sel{box-shadow:0 0 0 1px rgba(246,168,1,.55)}
.tx.bx:hover,.tx.bx.sel{box-shadow:0 0 0 1px rgba(246,168,1,.55),0 6px 18px rgba(0,0,0,.35)}
.tx-grip{position:absolute;left:-26px;top:50%;transform:translateY(-50%);display:none;width:20px;height:28px;border-radius:7px;border:0;background:#1b1916;color:#bfb6a4;cursor:grab;touch-action:none;place-items:center;box-shadow:0 2px 8px rgba(0,0,0,.5)}
.tx:hover .tx-grip,.tx.sel .tx-grip{display:grid}
.tx-bar{position:absolute;left:0;bottom:calc(100% + 8px);display:none;align-items:center;gap:6px;padding:6px;border-radius:12px;background:rgba(24,22,19,.66);-webkit-backdrop-filter:blur(12px) saturate(1.25);backdrop-filter:blur(12px) saturate(1.25);border:1px solid rgba(255,255,255,.12);box-shadow:0 10px 24px rgba(0,0,0,.55);white-space:nowrap;font:700 12px/1 var(--body);color:#cfc6b4;z-index:2}
.tx.sel .tx-bar{display:flex;width:max-content}
.tx-bar,.tx-bar *{letter-spacing:normal!important;text-shadow:none!important} /* the text's own effects never reach its toolbar */
.tx-bar *{overflow-wrap:normal;white-space:nowrap}.tx-bar>*{flex:none}
.tx.sel{z-index:95} /* above the header and video while you edit it, always under Advanced and other panels */
.tx.low .tx-bar{bottom:auto;top:calc(100% + 8px)}
.tx-bar select{height:28px;border-radius:8px;border:1px solid rgba(255,255,255,.14);background:rgba(38,36,32,.7);color:#e8e0d0;font:700 12px/1 var(--body);padding:0 6px}
.tx-bar .tc{width:20px;height:20px;border-radius:50%;border:2px solid #1b1916;box-shadow:0 0 0 1px #4a4236;cursor:pointer;padding:0}
.tx-bar .tc[aria-pressed="true"]{box-shadow:0 0 0 2px var(--yellow)}
.tx-bar .tb{height:28px;min-width:28px;padding:0 8px;border-radius:8px;border:1px solid rgba(255,255,255,.14);background:rgba(38,36,32,.7);color:#e8e0d0;font:900 12px/1 var(--body);cursor:pointer}
.tx-bar .tb[aria-pressed="true"]{border-color:var(--yellow);color:var(--yellow)}
.tx-bar .tb.del{color:#ff8a7a}
.tx-sep{width:1px;height:20px;background:#3a3630}
.tx-fx{position:absolute;left:0;top:calc(100% + 6px);display:grid;gap:9px;width:300px;padding:12px;border-radius:12px;background:rgba(24,22,19,.72);-webkit-backdrop-filter:blur(12px) saturate(1.25);backdrop-filter:blur(12px) saturate(1.25);border:1px solid rgba(255,255,255,.12);box-shadow:0 12px 28px rgba(0,0,0,.55);white-space:normal;cursor:default}
.tx-fx[hidden]{display:none}
.tx.low .tx-fx{top:calc(100% + 6px)}
.tx-fx .fx-r{display:grid;grid-template-columns:70px 1fr auto;align-items:center;gap:10px;font:800 12px/1 var(--body);color:#cfc6b4}
.tx-fx .fx-r>span{color:#a99f8e}
.tx-fx input[type=range]{width:100%;accent-color:#F6A801;cursor:pointer;margin:0}
.tx-fx output{min-width:34px;text-align:right;font:800 11.5px/1 var(--body);color:#F6A801;font-variant-numeric:tabular-nums}
.tx-fx .fx-dir{grid-column:2 / 4;display:grid;grid-template-columns:repeat(3,26px);gap:3px}
.tx-fx .fx-dir button{width:26px;height:26px;border-radius:7px;border:1px solid #3a3630;background:#262420;color:#cfc6b4;font:800 12px/1 var(--body);cursor:pointer;padding:0}
.tx-fx .fx-dir button[aria-checked="true"]{border-color:#F6A801;color:#111;background:#F6A801}
.tx-fx .fx-bc{grid-column:2 / 4;display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.tx-fx .fx-bc .tc[aria-pressed="true"]{box-shadow:0 0 0 2px var(--yellow)}
.tx-fx .fx-none{height:22px;padding:0 8px;border-radius:999px;border:1px solid #3a3630;background:#262420;color:#cfc6b4;font:800 11px/1 var(--body);cursor:pointer}
.tx-fx .fx-none[aria-pressed="true"]{border-color:#F6A801;color:#F6A801}
.tx-acts{display:flex;gap:8px;flex-wrap:wrap}
.tx-rs{position:absolute;right:-8px;bottom:-8px;display:none;width:16px;height:16px;padding:0;border-radius:50%;border:2px solid #111;background:#F6A801;cursor:nwse-resize;touch-action:none;box-shadow:0 2px 6px rgba(0,0,0,.45)}
.tx-re{position:absolute;right:-5px;top:50%;display:none;width:10px;height:30px;margin-top:-15px;padding:0;border-radius:5px;border:2px solid #111;background:#F6A801;cursor:ew-resize;touch-action:none}
.tx:hover .tx-rs,.tx.sel .tx-rs,.tx:hover .tx-re,.tx.sel .tx-re{display:block}
.tx.sizing{box-shadow:0 0 0 1px rgba(246,168,1,.9)!important}
.tx-grip{width:24px!important;height:32px!important;left:-30px!important}
html.ffo-textblocks:where(:not(.fft-textblocks)) .tx,html.ffo-textblocks:where(:not(.fft-textblocks)) .adv-tx{display:none!important}
/* ---- Audio in (Advanced > Video). Switch: audioin ---- */
.ai-wrap{display:contents}
.ai-meter{position:relative;flex:1 1 100%;height:8px;margin-top:4px;border-radius:999px;background:#1d1b18;box-shadow:inset 0 0 0 1px #34302a;overflow:hidden}
.ai-meter i{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:inherit;background:linear-gradient(90deg,#5fbf6a 0 60%,#F6A801 60% 85%,#e5484d 85%);background-size:var(--aw,300px) 100%;transition:width .06s linear}
.ai-meter b{position:absolute;right:6px;top:50%;transform:translateY(-50%);font:900 7px/1 var(--body);letter-spacing:.1em;color:#e5484d;opacity:0}
.ai-meter.clip b{opacity:1}
.ai-row{flex-wrap:wrap}
body:not(.ai-on) .ai-opt{display:none}
html.ffo-audioin:where(:not(.fft-audioin)) .ai-wrap,html.ffo-audioin:where(:not(.fft-audioin)) .ai-row,html.ffo-audioin:where(:not(.fft-audioin)) .ai-opt,html.ffo-audioin:where(:not(.fft-audioin)) .adv-au-tab,html.ffo-audioin:where(:not(.fft-audioin)) .adv-pane[data-p="au"]{display:none!important}
/* ---- ch1: MIDI lives at the right end of the top row (stays there once connected); the chord screen has the whole side ---- */
body.solo .kb-hint>div:first-child{flex:1 1 auto;min-width:0}
body.solo .kb-switches #midiBtn{order:200;margin-left:auto;display:inline-flex!important;align-items:center;gap:8px;height:28px;box-sizing:border-box;padding:0 12px 0 10px;border-radius:999px;border:1px solid #3a3630;background:#1d1b18;color:#e8e0d0;font:800 14px/1 var(--body);white-space:nowrap;max-width:260px}
body.solo .kb-switches #midiBtn #midiLabel{position:static;width:auto;height:auto;clip:auto;overflow:hidden;text-overflow:ellipsis;min-width:0}
body.solo .kb-switches #midiBtn .dot{display:block!important;flex:none;width:8px;height:8px;border-radius:50%;background:#6b655b}
body.solo .kb-switches #midiBtn.on{border-color:#2f5a3e;background:#16211a}
body.solo .kb-switches #midiBtn.on .dot{background:#3ddc84;box-shadow:0 0 0 3px rgba(61,220,132,.2)}
body.solo .kb-switches #midiBtn:hover,body.solo .kb-switches #midiBtn:focus-visible{border-color:#6b5320;outline:none}
body.solo .rig-panel .kb-side{grid-template-rows:minmax(0,1fr)!important}
body.solo .rig-panel .kb-side .lcd{grid-row:1/-1!important}
@media (max-width:620px){body.solo .kb-switches #midiBtn{order:-1;margin-left:0;flex:1 1 100%;justify-content:center}}
/* ---- The vision (switch: vision) ---- */
html.ffo-vision:where(:not(.fft-vision)) .cw-vis,html.ffo-vision:where(:not(.fft-vision)) .vis,html.ffo-vision:where(:not(.fft-vision)) #avVision{display:none!important}
body.solo .kb-switches .vis-btn{order:199;position:relative;display:inline-grid;place-items:center;width:28px;height:28px;padding:0;border-radius:50%;border:1px solid #5a400a;background:radial-gradient(circle at 50% 30%,#2a2214,#16130e);color:#F6A801;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
body.solo .kb-switches .vis-btn:hover{border-color:#F6A801;box-shadow:0 0 12px rgba(246,168,1,.35)}
body.rg .kb-switches .vis-btn{order:196!important;margin-left:0!important}
.ch1-who .cw-vis{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;box-sizing:border-box;padding:10px 12px;border-radius:12px;border:1px solid #3a3020;background:linear-gradient(180deg,#221d14,#191712);color:#FBF6EC;font:800 13px/1.2 Nunito,sans-serif;cursor:pointer;text-align:left}
.ch1-who .cw-vis .ch1t{color:#F6A801;font-size:15px}
.ch1-who .cw-vis i{font-style:normal;color:#F6A801;transition:transform .2s}
.ch1-who .cw-vis:hover{border-color:#F6A801}.ch1-who .cw-vis:hover i{transform:translateX(3px)}
.vis{position:fixed;inset:0;z-index:9800;display:grid;place-items:center;padding:20px;box-sizing:border-box;background:radial-gradient(ellipse at 50% 30%,rgba(44,38,27,.96),rgba(10,9,8,.97));opacity:0;transition:opacity .3s}
.vis[hidden]{display:none}
.vis.on{opacity:1}
.vis-in{position:relative;width:min(640px,100%);max-height:calc(100vh - 40px);max-height:calc(100dvh - 40px);overflow:auto;box-sizing:border-box;padding:56px 56px 44px;border-radius:24px;background:#111111;border:1px solid #2a2824;box-shadow:0 30px 80px rgba(0,0,0,.6);color:#d8d0c0;transform:translateY(14px);transition:transform .35s cubic-bezier(.2,.9,.3,1);scrollbar-width:thin;scrollbar-color:#3a3630 transparent}
.vis.on .vis-in{transform:none}
.vis{--sf:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",Inter,"Helvetica Neue",Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
.vis-k{margin:0 0 12px!important;font:600 13px/1 var(--sf)!important;letter-spacing:.02em;color:#F6A801!important}
.vis h2{margin:0 0 26px;font:700 clamp(34px,5.4vw,52px)/1.06 var(--sf);letter-spacing:-.035em;color:#f5f5f7}
.vis h2 em{font-style:normal;background:linear-gradient(180deg,#ffd25e,#F6A801);-webkit-background-clip:text;background-clip:text;color:transparent}
.vis-in p{margin:0 0 18px;font:400 17px/1.55 var(--sf);letter-spacing:-.01em;color:#a1a1a6}
.vis-in p.vis-big{font:600 24px/1.32 var(--sf);letter-spacing:-.022em;color:#f5f5f7;margin:28px 0}
.vis-in .ch1t{color:#F6A801;font-size:1.1em}
.vis-sig{display:flex;flex-direction:column;gap:2px;margin:26px 0 24px!important}
.vis-sig b{font:600 19px/1.2 var(--sf);letter-spacing:-.015em;color:#f5f5f7}.vis-sig b i{font-style:normal;font-weight:500;opacity:.6}
.vis-sig span{font:400 15px/1.3 var(--sf);letter-spacing:-.01em;color:#86868b}
.vis-play{height:44px;padding:0 22px;border-radius:999px;border:0;background:#F6A801;color:#111;font:600 15px/1 var(--sf);letter-spacing:-.01em;cursor:pointer}
.vis-x{position:absolute;top:14px;right:14px;width:34px;height:34px;border:0;border-radius:50%;background:#2a2824;color:#cfc6b4;font-size:22px;line-height:1;cursor:pointer}
.vis :focus-visible{outline:2px solid #F6A801;outline-offset:2px}
@media (max-width:620px){.vis{padding:0}.vis-in{max-height:100vh;max-height:100dvh;height:100%;border-radius:0;border-width:0;padding:60px 24px calc(32px + env(safe-area-inset-bottom,0px))}.vis-in p{font-size:16px}.vis-in p.vis-big{font-size:21px}}
/* ---- Feedback (switch: feedback) ---- */
html.ffo-feedback:where(:not(.fft-feedback)) #avFb,html.ffo-feedback:where(:not(.fft-feedback)) .fb-card{display:none!important}
body.solo .kb-switches .fb-btn{order:199;position:relative;display:inline-grid;place-items:center;width:36px;height:28px;padding:0;border-radius:999px;border:1px solid #3a3630;background:#1d1b18;color:#cfc6b4;cursor:pointer}
body.solo .kb-switches .fb-btn:hover,body.solo .kb-switches .fb-btn[aria-expanded="true"]{border-color:var(--kl,#F6A801);color:var(--kl,#F6A801)}
body.rg .kb-switches .fb-btn{order:196!important;margin-left:0!important}
.fb-card{position:fixed;z-index:9600;box-sizing:border-box;padding:16px;border-radius:18px;background:#1b1a17;border:1px solid #3a3630;border-top:3px solid var(--kl,#F6A801);box-shadow:0 24px 60px rgba(0,0,0,.6);color:var(--cream,#FBF6EC);font-family:var(--body)}
.fb-card[hidden]{display:none}
.fb-card.fb-sheet{left:12px;right:12px;bottom:calc(84px + env(safe-area-inset-bottom,0px));top:auto;width:auto}
.fb-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}.fb-h>b{font:800 16px/1.25 var(--body)}.fb-h .ch1t{color:var(--kl,#F6A801);font-size:18px}
.fb-x{flex:none;width:28px;height:28px;border:0;border-radius:50%;background:#2a2824;color:#cfc6b4;font-size:18px;line-height:1;cursor:pointer}
.fb-th{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.fb-t{display:flex;align-items:center;justify-content:center;gap:8px;height:46px;border-radius:14px;border:1px solid #3a3630;background:#121110;color:#e8e0cf;font:800 14px/1 var(--body);cursor:pointer}
.fb-t svg{width:20px;height:20px}
.fb-t[data-th="up"][aria-pressed="true"]{background:#F6A801;border-color:#F6A801;color:#111}
.fb-t[data-th="down"][aria-pressed="true"]{background:#3a2a20;border-color:#c0703a;color:#ffd0a8}
.fb-q{display:block;margin:14px 0 8px;font:800 13px/1.3 var(--body);color:#e8e0cf}.fb-q small{font-weight:700;color:#8a8170;margin-left:4px}
.fb-chips{display:flex;flex-wrap:wrap;gap:6px}
.fb-chip{height:30px;padding:0 12px;border-radius:999px;border:1px solid #3a3630;background:transparent;color:#cfc6b4;font:700 12.5px/1 var(--body);cursor:pointer}
.fb-chip[aria-pressed="true"]{background:#2a1d04;border-color:#F6A801;color:#ffc93d}
.fb-card textarea{display:block;width:100%;box-sizing:border-box;padding:10px 12px;border-radius:12px;border:1px solid #3a3630;background:#121110;color:#FBF6EC;font:600 14px/1.4 var(--body);resize:vertical;min-height:70px;-webkit-user-select:text;user-select:text}
.fb-card textarea:focus{outline:none;border-color:#F6A801}
.fb-r{display:flex;align-items:center;gap:10px;margin-top:12px}
.fb-send{height:38px;padding:0 20px;border-radius:999px;border:0;background:#F6A801;color:#111;font:800 14px/1 var(--body);cursor:pointer}.fb-send:disabled{opacity:.6}
.fb-msg{font:700 12.5px/1.3 var(--body);color:#ff9b7a}
.fb-s{margin:12px 0 0;font:600 12.5px/1.4 var(--body);color:#8a8170}
.fb-done{padding:10px 4px;text-align:center}.fb-done b{display:block;font:800 18px/1.2 var(--body);color:#F6A801}.fb-done p{margin:6px 0 0;font:600 14px/1.4 var(--body);color:#cfc6b4}
.fb-card :focus-visible{outline:2px solid #F6A801;outline-offset:2px}
/* (2026-10-27) Feedback lives on the right edge of the screen, not in the top bar (phones keep it in their menu) */
html body.solo:not(.mob) .kb-switches>#avFb{display:none!important}
.fb-edge{position:fixed;right:0;top:50%;z-index:9400;display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 7px 12px 8px;border-radius:12px 0 0 12px;border:1px solid #3a3630;border-right:0;background:#1d1b18;color:#e8e0cf;font:800 12px/1 var(--body);letter-spacing:.08em;cursor:pointer;box-shadow:-6px 8px 24px rgba(0,0,0,.4);transform:translate(110%,-50%);visibility:hidden;transition:transform .35s cubic-bezier(.2,.9,.3,1.1),visibility 0s .35s,color .2s,border-color .2s}
/* it comes and goes (2026-10-27): out for a while at natural moments, or when the mouse reaches the right edge; hidden the rest of the time */
.fb-edge.on,.fb-edge:focus-visible,.fb-edge[aria-expanded="true"]{transform:translate(4px,-50%);visibility:visible;transition:transform .35s cubic-bezier(.2,.9,.3,1.1),visibility 0s,color .2s,border-color .2s}
.fb-edge span{writing-mode:vertical-rl;transform:rotate(180deg)}
/* the small × at the tab's top corner: dismisses it (and it stays away by itself for 14 days) */
.fb-ex{position:fixed;z-index:9401;right:24px;top:calc(50% - 70px);width:20px;height:20px;padding:0;border-radius:50%;border:1px solid #3a3630;background:#2a2824;color:#cfc6b4;font:700 13px/1 var(--body);cursor:pointer;display:grid;place-items:center;opacity:0;visibility:hidden;transform:translateX(40px);transition:opacity .2s,transform .35s cubic-bezier(.2,.9,.3,1.1),visibility 0s .35s}
.fb-ex.on{opacity:1;visibility:visible;transform:none;transition:opacity .2s,transform .35s cubic-bezier(.2,.9,.3,1.1),visibility 0s}
.fb-ex:hover{color:#FBF6EC;border-color:#5a544a}.fb-ex:focus-visible{outline:2px solid #F6A801;outline-offset:2px}
body.mob .fb-ex,html.ffo-feedback:where(:not(.fft-feedback)) .fb-ex,body:not(.solo) .fb-ex,body.fs-on .fb-ex{display:none!important}
.fb-edge svg{width:18px;height:18px;flex:none}
.fb-edge.on:hover,.fb-edge[aria-expanded="true"]{transform:translate(0,-50%);color:#F6A801;border-color:#F6A801}
.fb-edge:focus-visible{outline:2px solid #F6A801;outline-offset:2px}
body.mob .fb-edge,html.ffo-feedback:where(:not(.fft-feedback)) .fb-edge,body:not(.solo) .fb-edge,body.fs-on .fb-edge,body.mob .fb-peek,html.ffo-feedback:where(:not(.fft-feedback)) .fb-peek{display:none!important}
.fb-peek{position:fixed;z-index:9450;right:44px;top:50%;transform:translate(10px,-50%);opacity:0;pointer-events:none;box-sizing:border-box;width:280px;padding:12px 14px;border-radius:16px;background:#1b1a17;border:1px solid #3a3630;border-top:3px solid var(--kl,#F6A801);box-shadow:0 18px 44px rgba(0,0,0,.55);color:var(--cream,#FBF6EC);transition:opacity .25s,transform .25s cubic-bezier(.2,.9,.3,1.2)}
.fb-peek.on{opacity:1;transform:translate(0,-50%);pointer-events:auto}
.fb-peek>b{display:block;font:800 14px/1.2 var(--body);margin:0 22px 10px 0}
.fb-peek .fb-px{position:absolute;top:8px;right:8px;width:22px;height:22px;border:0;border-radius:50%;background:#2a2824;color:#cfc6b4;font-size:14px;line-height:1;cursor:pointer}
.fb-moods{display:flex;gap:6px;justify-content:space-between}
.fb-m{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:5px;padding:8px 2px 7px;border-radius:14px;border:1px solid #3a3630;background:#121110;color:#cfc6b4;font:700 11px/1 var(--body);cursor:pointer;transition:border-color .15s,background .15s}
.fb-m i{font-style:normal;font-size:24px;line-height:1;filter:grayscale(.35);transition:filter .15s,transform .15s}
.fb-m:hover i,.fb-m[aria-pressed="true"] i{filter:none;transform:scale(1.18)}
.fb-m:hover{border-color:#5a544a}
.fb-m[aria-pressed="true"]{border-color:#F6A801;background:#2a1d04;color:#ffc93d}
.fb-peek .fb-m{padding:7px 2px;border-radius:12px}.fb-peek .fb-m i{font-size:22px}.fb-peek .fb-m span{display:none}
.fb-votes{display:flex;flex-direction:column;gap:6px}
.fb-v{display:flex;align-items:center;gap:10px;width:100%;box-sizing:border-box;padding:7px 10px;border-radius:12px;border:1px solid #3a3630;background:#121110;color:#e8e0cf;font:700 13px/1.25 var(--body);text-align:left;cursor:pointer}
.fb-v .fb-up{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:8px;border:1px solid #3a3630;color:#8a8170;font-size:11px}
.fb-v[aria-pressed="true"]{border-color:#F6A801;background:#2a1d04;color:#ffc93d}.fb-v[aria-pressed="true"] .fb-up{background:#F6A801;border-color:#F6A801;color:#111}
.fb-sig{margin:12px 0 0;font:600 12.5px/1.4 var(--body);color:#8a8170}.fb-sig b{color:#cfc6b4}
.fb-card{max-height:calc(100vh - 24px);overflow-y:auto}
/* ---- Profile button next to Connect MIDI (switch: profile) ---- */
.me-btn{display:none}
body.solo:not(.mob) .kb-switches .me-btn{order:201!important;display:inline-grid;place-items:center;flex:none;width:28px;height:28px;padding:0;margin-left:6px!important;border-radius:50%;border:1px solid #3a3630;background:#2a2824;color:#e8e0cf;font:900 12.5px/1 Nunito,sans-serif;cursor:pointer}
body.solo .kb-switches .me-btn.me-pro{background:#F6A801;border-color:#F6A801;color:#111}
body.solo .kb-switches .me-btn.me-free{background:#2a1d04;border-color:#5a400a;color:#ffc93d}
body.solo .kb-switches .me-btn:hover,body.solo .kb-switches .me-btn[aria-expanded="true"]{box-shadow:0 0 0 2px rgba(246,168,1,.45)}
/* ---- Founding members (switch: founding) ---- */
html.ffo-founding:where(:not(.fft-founding)) .fd-card,html.ffo-founding:where(:not(.fft-founding)) .cw-fd{display:none!important}
.ch1-who .cw-fd{display:flex;flex-direction:column;align-items:flex-start;gap:3px;width:100%;box-sizing:border-box;padding:10px 12px;border-radius:12px;border:0;background:linear-gradient(180deg,#ffc53d,#F6A801);color:#111;cursor:pointer;text-align:left}
.ch1-who .cw-fd[hidden]{display:none}
.ch1-who .cw-fd b{font:900 13.5px/1.2 Nunito,sans-serif}.ch1-who .cw-fd span{font:700 12px/1.2 Nunito,sans-serif;opacity:.8}
.fd-card{position:fixed;left:20px;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:9500;width:min(380px,calc(100vw - 32px));box-sizing:border-box;padding:16px 16px 16px 18px;border-radius:20px;background:#1b1a17;border:1px solid #3a3630;border-top:3px solid var(--kl,#F6A801);box-shadow:0 24px 60px rgba(0,0,0,.6);color:var(--cream,#FBF6EC);opacity:0;transform:translateY(16px);transition:opacity .25s,transform .25s cubic-bezier(.2,.9,.3,1.2)}
.fd-card.on{opacity:1;transform:none}
.fd-b small{display:block;font:900 10.5px/1 var(--body);letter-spacing:.2em;text-transform:uppercase;color:#a99f8e;margin-bottom:6px}
.fd-b>b{display:block;font:800 17px/1.25 var(--body);margin-right:24px}.fd-b>b .ch1t{color:var(--kl,#F6A801);font-size:19px}
.fd-b p{margin:6px 0 0;font:600 13px/1.45 var(--body);color:#cfc6b4}
.fd-pr{white-space:nowrap;font-weight:900;color:var(--kl,#F6A801)}.fd-pr s{color:#8a8170;font-weight:700;margin-right:3px}
.fd-r{display:flex;gap:8px;margin-top:12px}
.fd-go,.fd-no{height:36px;padding:0 16px;border-radius:999px;font:800 13.5px/1 var(--body);cursor:pointer}
.fd-go{border:0;background:var(--kl,#F6A801);color:#111}.fd-no{border:1px solid #3a3630;background:transparent;color:#cfc6b4}
.fd-x{position:absolute;top:10px;right:10px;width:28px;height:28px;border:0;border-radius:50%;background:#2a2824;color:#cfc6b4;font-size:18px;line-height:1;cursor:pointer}
body.mob .fd-card{left:12px;right:12px;width:auto;bottom:calc(84px + env(safe-area-inset-bottom,0px))}
/* ---- Install as an app (switch: install) ---- */
html.ffo-install:where(:not(.fft-install)) .ins-card{display:none!important}
.ins-card{position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:9500;display:flex;align-items:flex-start;gap:14px;width:min(380px,calc(100vw - 32px));box-sizing:border-box;padding:16px;border-radius:20px;background:#1b1a17;border:1px solid #3a3630;border-top:3px solid var(--kl,#F6A801);box-shadow:0 24px 60px rgba(0,0,0,.6);color:var(--cream,#FBF6EC);opacity:0;transform:translateY(16px);transition:opacity .25s,transform .25s cubic-bezier(.2,.9,.3,1.2)}
.ins-card.on{opacity:1;transform:none}
.ins-ic{flex:none;width:56px;height:56px;border-radius:14px;box-shadow:0 6px 16px rgba(0,0,0,.5)}
.ins-b{flex:1;min-width:0}
.ins-b>b{display:block;font:800 16px/1.25 var(--body);margin-right:22px}
.ins-b>b .ch1t{color:var(--kl,#F6A801);font-size:18px}
.ins-b p{margin:5px 0 0;font:600 13px/1.45 var(--body);color:#cfc6b4}
.ins-s{margin:10px 0 0;padding:10px 12px;border-radius:12px;background:#121110;font:700 13px/1.5 var(--body);color:#e8e0cf;list-style:none;counter-reset:s}
ol.ins-s li{counter-increment:s;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
ol.ins-s li::before{content:counter(s);display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--kl,#F6A801);color:#111;font:900 11px/1 var(--body);margin-right:2px}
ol.ins-s li+li{margin-top:6px}
.ins-s svg{color:var(--kl,#F6A801);vertical-align:-3px}
.ins-r{display:flex;gap:8px;margin-top:12px}
.ins-go,.ins-no{height:36px;padding:0 16px;border-radius:999px;font:800 13.5px/1 var(--body);cursor:pointer}
.ins-go{border:0;background:var(--kl,#F6A801);color:#111}
.ins-no{border:1px solid #3a3630;background:transparent;color:#cfc6b4}
.ins-x{position:absolute;top:10px;right:10px;width:28px;height:28px;border:0;border-radius:50%;background:#2a2824;color:#cfc6b4;font-size:18px;line-height:1;cursor:pointer}
body.mob .ins-card{left:12px;right:12px;width:auto;bottom:calc(84px + env(safe-area-inset-bottom,0px))}
/* ---- Board (switch: board): a screen share, PDF or picture on the rig, for teaching ---- */
html.ffo-board:where(:not(.fft-board)) #avBoard,html.ffo-board:where(:not(.fft-board)) .bd{display:none!important}
/* ---- Scenes (switch: scenes) ---- */
html.ffo-scenes:where(:not(.fft-scenes)) #avScn,html.ffo-scenes:where(:not(.fft-scenes)) .scn-card{display:none!important}
.scn-card .stg-a .scn-lk{display:inline-grid;place-items:center;width:30px;padding:0}
.scn-card .stg-a .scn-lk[aria-pressed="true"]{border-color:var(--yellow,#F6A801);color:var(--yellow,#F6A801);background:rgba(246,168,1,.1)}
.scn-btn.scn-lockon{position:relative}.scn-btn.scn-lockon:after{content:"";position:absolute;top:3px;right:3px;width:7px;height:7px;border-radius:50%;background:var(--yellow,#F6A801)}
.scn-toast{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom));transform:translate(-50%,16px);z-index:9600;padding:10px 16px;border-radius:999px;background:rgba(17,17,17,.92);border:1px solid #3a3630;color:#FBF6EC;font:800 13px/1 var(--body);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;white-space:nowrap}
.scn-toast.on{opacity:1;transform:translate(-50%,0)}
body.solo .kb-switches .bd-btn{order:197;position:relative;display:inline-grid;place-items:center;width:36px;height:28px;border-radius:999px;border:1px solid #3a3630;background:#1d1b18;color:#cfc6b4;cursor:pointer;padding:0}
body.solo .kb-switches .bd-btn:hover,body.solo .kb-switches .bd-btn[aria-pressed="true"]{border-color:var(--kl,#F6A801);color:var(--kl,#F6A801)}
.bd-btn .bd-dot{position:absolute;top:2px;right:4px;width:6px;height:6px;border-radius:50%;background:#3ddc84;display:none}
.bd-btn.live .bd-dot{display:block}
.bd{position:absolute;z-index:60;display:flex;flex-direction:column;border-radius:16px;background:#151412;border:1px solid #3a3630;border-top:3px solid var(--kl,#F6A801);box-shadow:0 18px 50px rgba(0,0,0,.55);overflow:hidden;box-sizing:border-box}
.bd[hidden]{display:none}
.bd.bd-full{position:fixed;inset:0;width:auto!important;height:auto!important;border-radius:0;border-width:3px 0 0;z-index:9000}
.bd-bar{display:flex;align-items:center;gap:8px;height:44px;padding:0 8px 0 14px;background:#1b1a17;border-bottom:1px solid #2a2824;flex:none;box-sizing:border-box}
.bd-t{font:800 13px/1 var(--body);color:var(--cream);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;max-width:40%}
.bd-pg{display:inline-flex;align-items:center;gap:4px}.bd-pg[hidden]{display:none}
.bd-pn{font:800 12px/1 var(--body);color:#cfc6b4;min-width:48px;text-align:center}
.bd-sp{flex:1}
.bd-i,.bd-x{flex:none;display:inline-grid;place-items:center;width:30px;height:30px;box-sizing:border-box;border-radius:50%;border:1px solid #3a3630;background:#1d1b18;color:#cfc6b4;cursor:pointer;padding:0}
.bd-i:hover,.bd-x:hover{border-color:var(--kl,#F6A801);color:var(--kl,#F6A801)}
.bd-i svg{width:16px;height:16px}
.bd-x{font-size:20px;line-height:1}
.bd-seg{flex:none;display:inline-flex;padding:2px;border-radius:999px;background:#111;border:1px solid #3a3630}
.bd-seg button{height:24px;padding:0 10px;border:0;border-radius:999px;background:none;color:#a99f8e;font:800 11.5px/1 var(--body);cursor:pointer}
.bd-seg button[aria-checked="true"]{background:var(--kl,#F6A801);color:#111}
.bd-body{flex:1;min-height:0;display:flex}
.bd-st{position:relative;flex:1;min-width:0;min-height:0;overflow:hidden;background:#1a1917;touch-action:none;cursor:crosshair}
.bd-rail{flex:none;width:170px;box-sizing:border-box;padding:10px;display:flex;flex-direction:column;gap:8px;background:#151412;border-right:1px solid #2a2824;overflow-y:auto}
.bd-rail[hidden]{display:none}
.bd-map{position:relative;flex:none;cursor:grab;touch-action:none}
.bd-mc{display:block;width:100%;height:auto;max-height:260px;object-fit:contain;border-radius:4px;box-shadow:0 6px 16px rgba(0,0,0,.55)}
.bd-mv{position:absolute;border:2px solid var(--kl,#F6A801);border-radius:3px;box-shadow:0 0 0 999px rgba(0,0,0,.32);pointer-events:none;box-sizing:border-box}
.bd-map{overflow:hidden;border-radius:4px}
.bd-mh{margin:0;font:700 11px/1.3 var(--body);color:#8a8170;text-align:center}
.bd-zm{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}
.bd-zm button{height:30px;border-radius:8px;border:1px solid #3a3630;background:#1d1b18;color:#cfc6b4;font:800 12px/1 var(--body);cursor:pointer}
.bd-zm button[aria-checked="true"]{background:var(--kl,#F6A801);border-color:var(--kl,#F6A801);color:#111}
.bd-sns{display:flex;flex-direction:column;gap:6px;margin-top:4px}
.bd-sns>b{font:900 10.5px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:#a99f8e}
.bd-sl{display:flex;flex-direction:column;gap:5px}
.bd-snw{display:flex;gap:4px}
.bd-sn{flex:1;min-width:0;height:30px;padding:0 10px;border-radius:8px;border:1px solid #3a3630;background:#1d1b18;color:var(--cream);font:800 12px/1 var(--body);text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.bd-sn:hover{border-color:var(--kl,#F6A801)}
.bd-snx{flex:none;width:30px;height:30px;border-radius:8px;border:1px solid #3a3630;background:#1d1b18;color:#a99f8e;font:400 16px/1 sans-serif;cursor:pointer;padding:0}
.bd-keep{height:32px;border-radius:8px;border:1px dashed var(--kl,#F6A801);background:none;color:var(--kl,#F6A801);font:800 12px/1 var(--body);cursor:pointer}
.bd-ch{flex:none;font:400 24px/1 'VT323',monospace;color:var(--kl,#F6A801);padding:0 6px;white-space:nowrap}
body.mob .bd-rail{display:none}
/* Pop out (2026-10-28): a window over the rig, moved by its bar and resized from any edge or corner */
.bd-rz{display:none}
.bd.bd-win{z-index:120;border-radius:14px;border:1px solid #4a4134;border-top:3px solid var(--kl,#F6A801);box-shadow:0 30px 80px rgba(0,0,0,.65),0 0 0 1px rgba(0,0,0,.4)}
.bd.bd-win .bd-bar{cursor:grab;user-select:none;-webkit-user-select:none;touch-action:none}
.bd.bd-win.bd-moving .bd-bar{cursor:grabbing}
.bd.bd-win.bd-moving,.bd.bd-win.bd-sizing{transition:none;box-shadow:0 36px 100px rgba(0,0,0,.75),0 0 0 2px var(--kl,#F6A801)}
.bd.bd-win.bd-moving .bd-st,.bd.bd-win.bd-sizing .bd-st{pointer-events:none}
.bd.bd-win .bd-rz{display:block;position:absolute;z-index:5;touch-action:none}
.bd-rz-n,.bd-rz-s{left:16px;right:16px;height:7px;cursor:ns-resize}.bd-rz-n{top:0}.bd-rz-s{bottom:0}
.bd-rz-e,.bd-rz-w{top:16px;bottom:16px;width:7px;cursor:ew-resize}.bd-rz-e{right:0}.bd-rz-w{left:0}
.bd-rz-ne,.bd-rz-nw,.bd-rz-se,.bd-rz-sw{width:16px;height:16px}
.bd-rz-ne{top:0;right:0;cursor:nesw-resize}.bd-rz-sw{bottom:0;left:0;cursor:nesw-resize}.bd-rz-nw{top:0;left:0;cursor:nwse-resize}.bd-rz-se{bottom:0;right:0;width:22px;height:22px;cursor:nwse-resize}
.bd.bd-win .bd-rz-se:after{content:"";position:absolute;right:5px;bottom:5px;width:9px;height:9px;border-right:2px solid #7a6f5c;border-bottom:2px solid #7a6f5c;border-radius:0 0 3px 0;pointer-events:none}
.bd.bd-win:hover .bd-rz-se:after{border-color:var(--kl,#F6A801)}
.bd.bd-win .bd-rail{width:150px}
.bd.bd-win.bd-short .bd-rail{display:none}
body.mob .bd-seg [data-sz="w"]{display:none}
.bd-dock{display:none!important}.bd.bd-win .bd-dock{display:inline-grid!important}
.bd.bd-win.bd-narrow .bd-seg,.bd.bd-win.bd-narrow .bd-rail{display:none!important}
.bd.bd-win.bd-tiny .bd-t,.bd.bd-win.bd-tiny .bd-ch{display:none}
.bd.bd-win .bd-bar{gap:6px;padding:0 6px 0 12px}
/* Teach (Oct 2026): page map | the page, big | your camera and the chord; the keys stay underneath, a little shorter */
.bd-side{display:none}
.bd.bd-teach .bd-side{flex:none;width:clamp(240px,26%,380px);box-sizing:border-box;padding:10px;display:flex;flex-direction:column;gap:10px;background:#151412;border-left:1px solid #2a2824}
.bd-cam{position:relative;flex:1;min-height:120px;border-radius:12px;overflow:hidden;background:radial-gradient(80% 70% at 55% 35%,#2e2a22 0%,#1a1814 60%,#0e0d0b 100%);display:grid;place-items:center}
.bd-cv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scaleX(-1);display:none}
.bd.bd-camon .bd-cv{display:block}
.bd-camb{position:relative;display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:999px;border:1px solid #3a3630;background:#1d1b18;color:var(--cream);font:800 13px/1 var(--body);cursor:pointer}
.bd-camb svg{color:var(--kl,#F6A801)}.bd-camb[hidden],.bd-camx[hidden]{display:none}
.bd-camx{position:absolute;top:8px;right:8px;width:30px;height:30px;border-radius:50%;border:0;background:rgba(0,0,0,.55);color:#fff;font:400 18px/1 sans-serif;cursor:pointer}
.bd-lcd{flex:none;min-height:96px;border-radius:12px;background:#2a1f08;border:1px solid #4a3812;padding:10px 14px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;gap:6px;overflow:hidden}
.bd-chn{font:400 46px/1 'VT323',monospace;color:var(--kl,#F6A801);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bd-chx{font:400 20px/1.1 'VT323',monospace;color:#c99a2a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bd.bd-teach .bd-ch{display:none}
body.solo.bd-teaching .kb-wrap>.kb-scroll .kb{height:210px!important}
body.mob .bd-side{display:none!important}
.bd.bd-short .bd-mh{display:none}
.bd.bd-short .bd-map{align-self:center}.bd.bd-short .bd-mc{width:auto;height:120px;max-height:none} /* a short board (over the panels): a smaller map, still there to drag */
.bd-c{position:absolute;inset:0}
.bd-el{position:absolute;display:block;max-width:none;user-select:none;-webkit-user-drag:none;pointer-events:none;background:#fff}
video.bd-el{background:#000}
.bd-fr{border:0;pointer-events:auto}
.bd-sel{position:absolute;border:2px solid var(--kl,#F6A801);background:rgba(246,168,1,.14);border-radius:4px;pointer-events:none}
.bd-sel[hidden]{display:none}
.bd-tip{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);margin:0;padding:8px 13px;border-radius:999px;background:rgba(17,17,17,.84);color:var(--cream);font:700 12px/1 var(--body);pointer-events:none;white-space:nowrap}
.bd-tip[hidden]{display:none}
.bd-pick{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:16px;box-sizing:border-box;text-align:center;color:var(--cream);overflow:auto;background:#151412;cursor:default}
.bd-pick[hidden]{display:none}
.bd-pick>b{font:600 18px/1.2 var(--display,var(--body))}
.bd-opts{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.bd-opts button{display:flex;align-items:center;gap:12px;width:236px;box-sizing:border-box;padding:12px 14px;border-radius:14px;border:1px solid #3a3630;background:#1d1b18;color:var(--cream);cursor:pointer;text-align:left}
.bd-opts button svg{flex:none;width:22px;height:22px;color:var(--kl,#F6A801)}
.bd-opts button span{display:flex;flex-direction:column;gap:4px;font:800 14px/1.2 var(--body)}
.bd-opts button small{font:600 12px/1.3 var(--body);color:#a99f8e}
.bd-opts button:hover{border-color:var(--kl,#F6A801)}
.bd-drop{margin:0;font:700 12px/1 var(--body);color:#8a8170}
.bd-st.bd-dz{outline:3px dashed var(--kl,#F6A801);outline-offset:-8px}
body.mob .bd-seg{display:none}
.bd :focus-visible{outline:2px solid var(--kl,#F6A801);outline-offset:2px}
.bd.bd-full .bd-bar{height:calc(44px + env(safe-area-inset-top,0px));padding-top:env(safe-area-inset-top,0px)}
body.solo img,body.solo svg,body.solo canvas{-webkit-touch-callout:none}
/* no accidental highlighting of words while playing; typing boxes and text you are editing still select normally */
body.solo{-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
body.solo :is(input,textarea,select,[contenteditable=""],[contenteditable="true"]),body.solo :is(input,textarea,[contenteditable=""],[contenteditable="true"]) *{-webkit-user-select:text;user-select:text}
/* ---- MIDI panel (MIDI pill > Advanced > MIDI & keys) ---- */
body.solo #lcdMidi{display:none!important}
html body.solo:not(.ml-on) .kb-switches>.ml-ctl{display:none!important} /* MIDI learn lives in the MIDI pill's menu now; the bar shows it only while learning, so you can finish */
body.solo.ml-on .kb-switches .ml-ctl{display:inline-flex!important;order:199;margin-left:auto;align-items:center}
body.solo.ml-on .kb-switches #midiBtn{margin-left:8px}
.md-st{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.md-led{width:10px;height:10px;border-radius:50%;background:#3a3630;box-shadow:inset 0 0 0 1px rgba(0,0,0,.4);transition:background .25s,box-shadow .25s;flex:none}
.md-led.ok{background:#2f7a4a}.md-led.hit{background:#3ddc84;box-shadow:0 0 0 3px rgba(61,220,132,.25),0 0 10px rgba(61,220,132,.8);transition:none}
.md-name{font:800 15px/1.2 var(--body);color:var(--cream)}
.md-sub{font:700 12.5px/1.3 var(--body);color:#8a8170}
.md-devs{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:6px}
.md-devs:empty{display:none}
.md-dev{display:grid;grid-template-columns:10px minmax(0,1fr) auto;align-items:center;column-gap:10px;padding:9px 12px;border-radius:12px;background:#1a1916;border:1px solid #2e2b26;transition:border-color .25s}
.md-dev.act{border-color:#2f7a4a}
.md-dev b{font:800 13.5px/1.2 var(--body);color:var(--cream);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.md-dev small{grid-column:2;font:700 11.5px/1.2 var(--body);color:#8a8170}
.md-dev em{grid-row:1/3;grid-column:3;font:800 11.5px/1 'Exo 2',var(--body);font-style:normal;color:#8a8170;min-width:70px;text-align:right}
.md-dev .md-led{grid-row:1/3}
.md-dev.off{opacity:.55}
.md-sel{height:36px;border-radius:10px;border:1px solid #3a3630;background:#1d1b18;color:#e8e0d0;font:700 13.5px/1 var(--body);padding:0 10px;min-width:0;max-width:100%}
.md-bars{grid-column:1/-1;display:grid;grid-template-columns:72px minmax(0,1fr) 52px;gap:8px 10px;align-items:center;width:100%;font:800 11px/1 var(--body);color:#8a8170;letter-spacing:.06em;text-transform:uppercase}
.md-bar{position:relative;height:8px;border-radius:999px;background:#1d1b18;box-shadow:inset 0 0 0 1px #34302a;overflow:hidden}
.md-bar i{position:absolute;top:0;bottom:0;background:var(--yellow);border-radius:999px;transition:left .05s,width .05s}
.md-bar.zc::after{content:"";position:absolute;left:50%;top:-1px;bottom:-1px;width:1px;background:#5f5950}
.md-bars b{color:#cfc6b4;font-weight:800;letter-spacing:0;text-transform:none;min-width:44px;text-align:right}
.md-acts{display:flex;gap:8px;flex-wrap:wrap;align-items:stretch}
.md-pedal{display:inline-flex;align-items:center;gap:8px;height:auto;min-height:30px;box-sizing:border-box;padding:0 12px;border-radius:999px;border:1px solid #3a3630;font:800 13px/1 var(--body);color:#8a8170}
.md-pedal.down{border-color:var(--yellow);color:var(--yellow);box-shadow:0 0 0 3px rgba(246,168,1,.18)}
html.ffo-midipanel:where(:not(.fft-midipanel)) .md-row{display:none!important}
.ctr-mode{flex:none;display:inline-flex;padding:2px;border-radius:999px;background:#0f0e0c;box-shadow:inset 0 0 0 1px #2c2a26}
.ctr-mode button{height:22px;padding:0 9px;border:0;border-radius:999px;background:transparent;color:#8a8170;font:800 10.5px/1 var(--body);letter-spacing:.04em;cursor:pointer}
.ctr-mode button[aria-checked="true"]{background:#2e2717;color:var(--yellow)}
/* the focus ring sits inside the pill, so it stays centred in the switch instead of spilling over its edge */
.ctr-mode button:focus-visible,body.solo :is(.kp-seg,.psz-seg,.rg-seg,.adv-seg,.mt-vw-s) button:focus-visible{outline:2px solid var(--yellow,#F6A801)!important;outline-offset:-2px!important;box-shadow:none!important}
.ctr-c.ctr-n{min-width:34px}
@media (max-width:620px){.ctr-mode button{padding:0 7px}}
/* ---- quick Key light at the bottom (switch: quicklight) ---- */
html:not(.ffo-quicklight:where(:not(.fft-quicklight))) body.solo .kl-wrap.kl-moved.kl-quick{display:block!important}
body.solo .kl-q{bottom:calc(100% + 10px);top:auto}
.kl-mine{position:relative;display:block;padding:0;border:0;background:none;color:#bfb6a4;font:800 8.5px/1 var(--body);cursor:pointer}
.kl-mine i{display:block;width:100%;aspect-ratio:1;border-radius:50%;box-shadow:0 0 0 2px #1b1916,0 0 0 3px #6b5320}
.kl-mine span{position:absolute;left:50%;top:calc(100% + 3px);transform:translateX(-50%);white-space:nowrap}
.kl-sw:has(.kl-mine:not([hidden])){grid-template-columns:repeat(9,minmax(0,1fr))!important;padding-bottom:10px}
.kl-mine[hidden]{display:none}
/* ---- case finish (Look > Case). Themes override it while one is on. Switch: case ---- */
body.solo.cs-oak:not([class*="th-"]) .kb-wrap::before,body.solo.cs-oak:not([class*="th-"]) .kb-wrap::after{background:repeating-linear-gradient(90deg,rgba(0,0,0,.05) 0 2px,transparent 2px 6px),linear-gradient(180deg,#c99a63,#a87a45 55%,#8a5f30)}
body.solo.cs-ebony:not([class*="th-"]) .kb-wrap::before,body.solo.cs-ebony:not([class*="th-"]) .kb-wrap::after{background:repeating-linear-gradient(90deg,rgba(255,255,255,.04) 0 2px,transparent 2px 6px),linear-gradient(180deg,#3a2a20,#241912 55%,#150e0a)}
body.solo.cs-rose:not([class*="th-"]) .kb-wrap::before,body.solo.cs-rose:not([class*="th-"]) .kb-wrap::after{background:repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 2px,transparent 2px 6px),linear-gradient(180deg,#7a2e22,#5a1f17 55%,#3d140e)}
body.solo.cs-red:not([class*="th-"]) .kb-wrap{background:linear-gradient(180deg,#c8232b 0%,#a8161e 40%,#7e0f15 100%)!important;box-shadow:0 40px 80px -20px rgba(0,0,0,.8),0 22px 26px -14px rgba(0,0,0,.85),0 0 0 1px #5e0b10,inset 0 1px 0 rgba(255,255,255,.18),inset 0 -14px 22px -12px rgba(0,0,0,.45)!important}
body.solo.cs-red:not([class*="th-"]) .kb-wrap::before,body.solo.cs-red:not([class*="th-"]) .kb-wrap::after,body.solo.cs-black:not([class*="th-"]) .kb-wrap::before,body.solo.cs-black:not([class*="th-"]) .kb-wrap::after{background:linear-gradient(180deg,#2a2a2a,#151515 55%,#0b0b0b);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),inset 0 2px 0 rgba(255,255,255,.14)}
body.solo.cs-black:not([class*="th-"]) .kb-wrap{background:linear-gradient(180deg,#1b1b1c 0%,#0e0e0f 45%,#060607 100%)!important}
body.solo.cs-black:not([class*="th-"]) .kb-wrap::before,body.solo.cs-black:not([class*="th-"]) .kb-wrap::after{background:linear-gradient(90deg,#0a0a0a,#262626 45%,#0a0a0a)}
body.solo.cs-graphite:not([class*="th-"]) .kb-wrap{background:linear-gradient(180deg,#3b3d40 0%,#2a2c2f 40%,#1c1d1f 100%)!important}
body.solo.cs-graphite:not([class*="th-"]) .kb-wrap::before,body.solo.cs-graphite:not([class*="th-"]) .kb-wrap::after{background:repeating-linear-gradient(180deg,rgba(255,255,255,.05) 0 1px,transparent 1px 3px),linear-gradient(90deg,#55585c,#8d9196 45%,#55585c)}
/* on the red case the panel modules keep their dark faces, so every label stays readable */
.cs-pick{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;width:100%}
.cs-pick button{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 4px 7px;border-radius:12px;border:1px solid #34302a;background:#1d1b18;color:#bfb6a4;font:800 11.5px/1.15 var(--body);cursor:pointer;text-align:center;min-width:0;box-sizing:border-box;overflow:hidden}
.cs-pick button>span{display:block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cs-pick button i{display:block;width:100%;max-width:64px;height:26px;border-radius:7px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.cs-pick button[aria-checked="true"]{border-color:var(--yellow);color:var(--cream);box-shadow:0 0 0 2px rgba(246,168,1,.22)}
@media (max-width:620px){.cs-pick{grid-template-columns:repeat(4,minmax(0,1fr))}}
html.ffo-case:where(:not(.fft-case)) .adv-cs{display:none!important}
/* ---- overlaps: the panel's own pop-ups (piano sound menu, etc.) sit above the chord trail and the keys ---- */
body.solo .rig-panel{position:relative;z-index:6}
/* DRUMS / SYNTH flip tab: inside the module's top corner, clear of the yellow line */
body.solo .rig-panel .flip-tab{top:9px;right:10px}
body.solo .rig-panel .mix-drums .ms-h{padding-right:78px;box-sizing:border-box}
.ea-pk{position:absolute;right:7px;top:18px;padding:2px 7px;border-radius:999px;background:rgba(15,14,12,.8);font:800 10px/1.3 var(--body);color:#8a8170;pointer-events:none}
.ea-pk.warm{color:var(--yellow)}.ea-pk.hot{color:#ff6b5e}
body.solo #eqBtn.peak{box-shadow:0 0 0 2px #e5484d,0 0 14px rgba(229,72,77,.6)!important;transition:none}
body.solo #eqBtn.peak .eq-on{background:#e5484d!important}
/* ---- E-piano channel (switch: eplayer) ---- */
.mix-ep{display:none}
html:not(.ffo-eplayer:where(:not(.fft-eplayer))) body.solo .rig-panel .mix-ep{display:flex}
html:not(.ffo-eplayer:where(:not(.fft-eplayer))) body.solo .pno-type [data-fam="e"]{display:none}
html:not(.ffo-eplayer:where(:not(.fft-eplayer))) body.solo .pno-type [data-fam="p"]{border-radius:999px}
body:not(.solo) .mix .mix-ep{display:none!important}
body.solo .rig-panel .mix-ep .ms-h>b{white-space:nowrap}
.tx:not(:focus-within) .tx-t{user-select:none;-webkit-user-select:none;cursor:grab}
.tx.drag,.tx.drag .tx-t{cursor:grabbing}
.tx-grip{width:24px;height:34px;left:-30px}
.tx-bar{flex-wrap:wrap;max-width:min(92vw,560px);white-space:normal}
.tc-any{position:relative;overflow:hidden;background:conic-gradient(#f44,#ff0,#4f4,#0ff,#44f,#f0f,#f44)!important}
.tc-any input{position:absolute;inset:-6px;width:40px;height:40px;opacity:0;cursor:pointer;border:0;padding:0}
/* ---- Audio in: effects rig and talkbox (switches: airig, vocoder) ---- */
.rig-pre,.rig-room{display:flex;flex-wrap:wrap;gap:6px}
.rig-pre button,.rig-room button{height:30px;padding:0 12px;border-radius:999px;border:1px solid #34302a;background:#1d1b18;color:#bfb6a4;font:800 12.5px/1 var(--body);cursor:pointer}
.rig-pre button[aria-checked="true"],.rig-room button[aria-checked="true"]{background:var(--yellow);border-color:var(--yellow);color:#111}
html.ffo-podvoice:where(:not(.fft-podvoice)) .rig-pod{display:none!important}html.ffo-trshow:where(:not(.fft-trshow)) .adv-trshow,html.ffo-vidorient:where(:not(.fft-vidorient)) .vd-or,html.ffo-bellep:where(:not(.fft-bellep)) .ep-bell,html.ffo-bellep:where(:not(.fft-bellep)) [data-pv="epb"],html.ffo-guitars:where(:not(.fft-guitars)) .mix-gtr,html.ffo-bass:where(:not(.fft-bass)) .mix-bass,html.ffo-world:where(:not(.fft-world)) .mix-world{display:none!important}
html.ffo-epmore:where(:not(.fft-epmore)) .ep-more,html.ffo-epmore:where(:not(.fft-epmore)) [data-pv="epr"],html.ffo-epmore:where(:not(.fft-epmore)) [data-pv="epd"],html.ffo-epmore:where(:not(.fft-epmore)) [data-pv="epf"]{display:none!important}html.ffo-voice:where(:not(.fft-voice)) .rig-vx{display:none!important}
.rig-k{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 16px}
.rig-k label{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 8px;font:800 11px/1 var(--body);letter-spacing:.06em;text-transform:uppercase;color:#8a8170}
.rig-k input{grid-column:1/-1;width:100%;accent-color:#F6A801;height:22px}
.rig-k b{grid-row:1;grid-column:2;color:#cfc6b4;letter-spacing:0;text-transform:none;font-weight:800}
.ai-rig.rig-off .rig-k,.ai-rig.rig-off .rig-room{opacity:.4;pointer-events:none}
@media (max-width:620px){.rig-k{grid-template-columns:repeat(2,minmax(0,1fr))}.rig-k.rig-k3{grid-template-columns:repeat(3,minmax(0,1fr))}}
html.ffo-airig:where(:not(.fft-airig)) .ai-rig,html.ffo-vocoder:where(:not(.fft-vocoder)) .ai-voc{display:none!important}
html:not(.ffo-airig:where(:not(.fft-airig))) .ai-wrap [data-aiv]{display:none}
/* Low delay: the heavy paint effects go (blurred glows, screen scanlines, backdrop blurs), so each frame is cheap and the keys answer at once */
html.ld-on body.solo #kb .kw.on,html.ld-on body.solo #kb .kb.on,html.ld-on body.solo #kb .on::before,html.ld-on body.solo #kb .on::after{filter:none!important;box-shadow:none!important;animation:none!important}
html.ld-on body.solo .lcd::before,html.ld-on body.solo .lcd::after,html.ld-on body.solo .lcd .crt{display:none!important}
html.ld-on body.solo .kb-wrap *{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html.ld-on body.solo .kb-wrap{box-shadow:0 0 0 1px #2c2a26!important}
html.ld-on .ch1g,html.ld-on .ch1t{animation:none!important;filter:none!important}
html.ffo-lowdelay:where(:not(.fft-lowdelay)) .adv-ld{display:none!important}
/* ---- ch1 Stream view (switch: stream): only shows in the ?stream window ---- */
.sv-btn{display:none}
html:not(.ffo-stream:where(:not(.fft-stream))) body.solo:not(.sv) .kb-switches #avSv.sv-btn{display:inline-flex}
html.ffo-stream:where(:not(.fft-stream)) .sv-btn{display:none!important}
.sv-bg,.sv-veil,.sv-halo,.sv-ph,.sv-hd,.sv-live,.sv-ctl,.sv-tip,.sv-stage,.sv-fb,.sv-rbadge,.sv-count,.sv-done,.sv-ttl,.sv-snd{display:none}
html.sv{--svmark:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1490 712%22%3E%3Cpath fill=%22%23FFFFFF%22 d=%22M232.0 201.0Q254.0 201.0 281.0 203.0Q308.0 205.0 336.5 210.0Q365.0 215.0 389.0 224.0L378.0 279.0Q345.0 276.0 308.5 274.5Q272.0 273.0 246.0 273.0Q188.0 273.0 154.0 289.0Q120.0 305.0 105.0 345.0Q90.0 385.0 90.0 456.0Q90.0 527.0 105.0 567.5Q120.0 608.0 154.0 624.0Q188.0 640.0 246.0 640.0Q261.0 640.0 285.0 639.0Q309.0 638.0 336.5 636.0Q364.0 634.0 389.0 630.0L398.0 687.0Q361.0 700.0 317.5 706.0Q274.0 712.0 231.0 712.0Q147.0 712.0 96.0 687.0Q45.0 662.0 22.5 606.0Q0.0 550.0 0.0 456.0Q0.0 362.0 23.0 306.0Q46.0 250.0 97.0 225.5Q148.0 201.0 232.0 201.0Z M809.0 201.0Q941.0 201.0 941.0 335.0V700.0H855.0V359.0Q855.0 310.0 839.5 291.5Q824.0 273.0 786.0 273.0Q741.0 273.0 696.0 294.0Q654.0 313.0 598.0 349.0V700.0H513.0V0.0H598.0L599.0 193.0Q599.0 226.0 597.0 255.0Q595.0 273.0 592.0 288.0Q646.0 249.0 698.0 226.0Q754.0 201.0 809.0 201.0Z%22/%3E%3Cpath fill=%22%23FFFFFF%22 d=%22M1216 700L1398 700L1490 40L1256 40L1106 150L1091 255L1281 230Z%22/%3E%3C/svg%3E")}
html.sv,body.sv{background:#050505!important;overflow:hidden!important;height:100%}
html.sv{scrollbar-gutter:auto!important;scrollbar-width:none}html.sv::-webkit-scrollbar{display:none}
body.sv #nav,body.sv footer,body.sv #offerPop,body.sv #waFab,body.sv #aiFab,body.sv #aiPanel,body.sv .ch1-who,body.sv .ap-tab,body.sv .ap,
body.sv .kb-hint,body.sv #metro,body.sv #tuner,body.sv .ctr,body.sv .kb-tools,body.sv .kb-grip,body.sv .kp-grip,body.sv .jy,body.sv #mixPanel,body.sv .ms-min,body.sv .ms-rail,
body.sv .kb-switches,body.sv .rig-brand,body.sv .hero-grid,body.sv .kb-rail,body.sv .lp-lanes,body.sv .stg-bar,body.sv .solo-made,body.sv .ins-card,body.sv .fd-card,body.sv .fb-card,
body.sv .rg-card,body.sv .tx-guide,body.sv .fs-brand,body.sv .fs-exit,body.sv .cta-bar,body.sv .cam .cam-x,body.sv .cam .cam-rs,body.sv .ticker,body.sv main>section:not(.hero),body.sv .rg-nav,body.sv .rg-bar,body.sv .tx-el{display:none!important}
body.sv>*:not(.cam):not([class^="sv-"]):not(.pgate):not(.modal):not(script){visibility:hidden!important}
body.sv .sv-stage{display:block;position:fixed;inset:0;z-index:5;pointer-events:none;visibility:visible}
body.sv .sv-stage>*{pointer-events:auto}
body.sv main{position:fixed!important;left:-9999px!important;top:0!important}
body.sv .hero,body.sv .hero>.wrap{padding:0!important;margin:0!important;background:none!important;overflow:visible!important}
body.sv .kb-wrap{background:none!important;box-shadow:none!important;border:0!important;padding:0!important;margin:0!important;left:0!important;top:0!important}
body.sv .kb-wrap::before,body.sv .kb-wrap::after,body.sv .rig-panel::before,body.sv .rig-panel::after{display:none!important}
body.sv .rig-panel{background:none!important;box-shadow:none!important;border:0!important}
/* the stage */
body.sv .sv-bg{display:block;z-index:1;filter:blur(calc(26px * var(--svu,1))) saturate(1.25) brightness(.62);clip-path:inset(0);background:radial-gradient(90% 60% at 50% 18%,#3a2716,#120d09 60%,#060505)}
body.sv .sv-veil{display:block;z-index:2;pointer-events:none;
background:radial-gradient(120% 70% at 50% 22%,transparent 0,rgba(0,0,0,.25) 60%,rgba(0,0,0,.55) 100%),linear-gradient(180deg,rgba(0,0,0,.25) 0,transparent 18%,transparent 40%,rgba(0,0,0,.6) calc(var(--svfb,62%) - 6%),#070606 var(--svfb,62%));}
body.sv .sv-veil::after{content:"";position:absolute;left:0;right:0;top:var(--svfb,62%);display:none;height:1px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--kl,#F6A801) 55%,transparent),transparent);opacity:.35;transition:opacity .4s}
body.sv.sv-play .sv-veil::after{opacity:.9}
body.sv .sv-halo{display:block;z-index:3;pointer-events:none;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--kl,#F6A801) 26%,transparent),transparent 72%);opacity:.45;transition:opacity .5s ease}
body.sv.sv-play .sv-halo{opacity:.85}
body.sv .cam{z-index:5!important;aspect-ratio:1!important;border-radius:50%!important;animation:none!important;transform:none!important;cursor:default!important;
box-shadow:0 0 0 calc(2px * var(--svu,1)) color-mix(in srgb,var(--kl,#F6A801) 70%,transparent),0 0 0 calc(7px * var(--svu,1)) rgba(0,0,0,.35),0 calc(30px * var(--svu,1)) calc(60px * var(--svu,1)) rgba(0,0,0,.55)!important}
body.sv .cam canvas{object-fit:cover;width:100%!important;height:100%!important}
body.sv .sv-ph{display:grid;place-content:center;justify-items:center;gap:6px;z-index:4;border-radius:50%;border:0;cursor:pointer;color:#f1e8d6;font-family:inherit;
background:radial-gradient(70% 70% at 50% 35%,#2b2219,#120e0b);box-shadow:inset 0 0 0 calc(2px * var(--svu,1)) rgba(246,168,1,.45),0 calc(30px * var(--svu,1)) calc(60px * var(--svu,1)) rgba(0,0,0,.55)}
body.sv .sv-ph b{font:800 calc(16px * var(--svu,1))/1.1 var(--body,inherit)}body.sv .sv-ph small{font:600 calc(12px * var(--svu,1))/1.2 var(--body,inherit);color:#9d927f}
body.sv .sv-ph svg{width:calc(30px * var(--svu,1));height:auto;color:var(--kl,#F6A801)}
body.sv.sv-cam .sv-ph{display:none}
body.sv #lcd{z-index:6!important;margin:0!important;width:340px!important;min-width:340px!important;max-width:340px!important;flex:none!important;box-shadow:0 0 0 1px rgba(246,168,1,.22),0 24px 50px rgba(0,0,0,.6)!important}
body.sv #lcd .lcd-id,body.sv #lcd .ms-min,body.sv #lcd [class*="lcd-min"]{display:none!important}
body.sv .kb-scroll{z-index:6!important;margin:0!important;overflow:hidden!important;padding:0!important;max-width:none!important;display:flex;align-items:flex-end}
body.sv .kb-scroll::before{display:none!important}
body.sv #kb{height:100%!important;width:100%!important;max-width:none!important;min-width:0!important;margin:0 auto!important;flex:none!important}
body.sv #kb{width:var(--svkw,100%)!important}
body.sv #kb{margin-left:var(--svkx,0px)!important;transition:margin-left .45s cubic-bezier(.2,.8,.2,1)}
body.sv .kb-scroll{justify-content:flex-start}
body.sv:not(.sv-flat) .kb-scroll{perspective:900px!important;perspective-origin:50% 100%!important}
body.sv:not(.sv-flat) #kb{transform:rotateX(26deg)!important;transform-origin:50% 100%!important}
body.sv.sv-flat #kb{transform:none!important}
body.sv .sv-fb{display:block;z-index:6;pointer-events:none;background:linear-gradient(180deg,#2c2b2e 0,#121214 22%,#050506 70%,#0b0b0c 100%);
box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(0,0,0,.8),0 -10px 30px rgba(0,0,0,.45)}
body.sv .sv-fb::before{content:"";position:absolute;left:0;right:0;top:0;height:45%;background:linear-gradient(180deg,rgba(255,255,255,.10),transparent)}
body.sv .sv-fb::after{content:"";position:absolute;left:0;right:0;bottom:0;height:calc(4px * var(--svu,1));background:linear-gradient(180deg,#5b0d12,#3a070b);box-shadow:0 -1px 0 rgba(0,0,0,.6)}
body.sv .sv-plate{position:absolute;left:50%;top:44%;width:calc(54px * var(--svu,1));height:calc(26px * var(--svu,1));transform:translate(-50%,-50%);background:linear-gradient(180deg,#f6e3b0,#c9a24f 55%,#8a6a2a);
-webkit-mask:var(--svmark) center/contain no-repeat;mask:var(--svmark) center/contain no-repeat;filter:drop-shadow(0 1px 0 rgba(0,0,0,.6));opacity:.92;transition:filter .4s}
body.sv.sv-play .sv-plate{filter:drop-shadow(0 0 calc(8px * var(--svu,1)) color-mix(in srgb,var(--kl,#F6A801) 70%,transparent))}
body.sv .sv-ttl{display:none}
body.sv.sv-l-lesson .sv-plate{left:34%}body.sv.sv-l-lesson .cam{z-index:8!important}body.sv.sv-l-lesson .sv-ph{z-index:8}body.sv.sv-l-lesson .sv-halo{z-index:7}
body.sv.sv-l-lesson .sv-ttl{display:block;z-index:7;font:800 calc(24px * var(--svu,1))/1.15 var(--body,inherit);color:#f6efe2;letter-spacing:-.01em;text-shadow:0 2px 12px rgba(0,0,0,.6);overflow-wrap:anywhere}
body.sv.sv-l-lesson .sv-ttl::after{content:"";display:block;width:calc(40px * var(--svu,1));height:calc(4px * var(--svu,1));margin-top:calc(10px * var(--svu,1));border-radius:4px;background:var(--kl,#F6A801)}
body.sv .sv-ttl[hidden]{display:none!important}
body.sv.sv-l-lesson .sv-tin,body.sv:not(.sv-l-lesson) .sv-tin{display:inline-flex}body.sv:not(.sv-l-lesson) .sv-tin{display:none}
/* Portrait: the ch1 case stood on its end, wood cheeks and all */
body.sv.sv-l-portrait .sv-bg{opacity:0}
body.sv.sv-l-portrait .sv-veil{background:linear-gradient(90deg,#6b3d1c 0,#4a2810 calc(13px * var(--svu,1)),rgba(0,0,0,.6) calc(13px * var(--svu,1)),transparent calc(26px * var(--svu,1)),transparent calc(100% - 26px * var(--svu,1)),rgba(0,0,0,.6) calc(100% - 13px * var(--svu,1)),#4a2810 calc(100% - 13px * var(--svu,1)),#6b3d1c 100%),
radial-gradient(120% 60% at 50% 0,#2c2822,#191714 55%,#0e0d0b)!important}
/* Lesson: the room stays, a little darker, so the big chord screen reads */
body.sv.sv-l-lesson .sv-bg{filter:blur(calc(26px * var(--svu,1))) saturate(1.1) brightness(.45)}
body.sv .sv-snd{display:flex;align-items:center;justify-content:center;gap:10px;z-index:25;height:calc(44px * var(--svu,1));border-radius:999px;border:0;cursor:pointer;
background:#F6A801;color:#111;font:800 calc(14px * var(--svu,1))/1 var(--body,inherit);box-shadow:0 0 0 6px rgba(246,168,1,.25),0 18px 40px rgba(0,0,0,.55);animation:svPulse 1.8s ease-in-out infinite}
body.sv .sv-snd[hidden]{display:none}@keyframes svPulse{50%{box-shadow:0 0 0 12px rgba(246,168,1,.08),0 18px 40px rgba(0,0,0,.55)}}
body.sv .sv-hd{display:flex;align-items:center;gap:calc(7px * var(--svu,1));z-index:8;font:700 calc(12.5px * var(--svu,1))/1 var(--body,inherit);color:#f2ebde;text-shadow:0 1px 4px rgba(0,0,0,.6);letter-spacing:.01em}
body.sv .sv-hd[hidden],body.sv .sv-live[hidden]{display:none}
body.sv .sv-mark{display:inline-block;width:calc(26px * var(--svu,1));height:calc(13px * var(--svu,1));background:var(--kl,#F6A801);-webkit-mask:var(--svmark) center/contain no-repeat;mask:var(--svmark) center/contain no-repeat}
body.sv .sv-live{display:flex;align-items:center;gap:calc(6px * var(--svu,1));z-index:8;padding:calc(6px * var(--svu,1)) calc(10px * var(--svu,1));border-radius:999px;background:rgba(0,0,0,.45);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
font:800 calc(11px * var(--svu,1))/1 var(--body,inherit);letter-spacing:.08em;color:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.14)}
body.sv .sv-live i{width:calc(7px * var(--svu,1));height:calc(7px * var(--svu,1));border-radius:50%;background:#ff3b30;box-shadow:0 0 8px #ff3b30;animation:svBlink 1.6s ease-in-out infinite}
@keyframes svBlink{50%{opacity:.35}}
body.sv .sv-ctl{display:flex;flex-wrap:wrap;align-items:center;gap:8px;z-index:20;padding:10px 12px;border-radius:18px;background:rgba(14,13,12,.82);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
box-shadow:0 0 0 1px rgba(255,255,255,.12),0 18px 40px rgba(0,0,0,.5);opacity:0;pointer-events:none;transform:translateY(-8px);transition:opacity .25s,transform .25s;font-family:var(--body,inherit);box-sizing:border-box}
body.sv.sv-ui .sv-ctl{opacity:1;pointer-events:auto;transform:none}
body.sv .sv-t{flex:1 1 100%;display:flex;align-items:baseline;gap:8px}body.sv .sv-t b{font:800 13px/1 var(--body,inherit);color:#F6A801}body.sv .sv-t small{font:600 11px/1 var(--body,inherit);color:#8c8371}
body.sv .sv-seg{display:inline-flex;padding:2px;border-radius:999px;background:#1f1d1a;border:1px solid #34302a}
body.sv .sv-seg button,body.sv .sv-b{height:28px;padding:0 11px;border-radius:999px;border:0;background:none;color:#d8cfbe;font:700 12px/1 var(--body,inherit);cursor:pointer}
body.sv .sv-seg button[aria-checked="true"]{background:#F6A801;color:#111}
body.sv .sv-b{border:1px solid #34302a;background:#1f1d1a}body.sv .sv-b[aria-pressed="true"]{border-color:#F6A801;color:#F6A801}
body.sv .sv-in{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 4px 0 10px;border-radius:999px;border:1px solid #34302a;background:#1f1d1a;font:700 11px/1 var(--body,inherit);color:#8c8371}
body.sv .sv-in input{width:118px;height:24px;border:0;border-radius:999px;background:#2a2723;color:#f1e8d6;padding:0 9px;font:600 12px var(--body,inherit)}
body.sv .sv-rec{border-color:#7a2a24!important;color:#ff8a7a!important}body.sv .sv-rec[aria-pressed="true"]{background:#c62f22!important;color:#fff!important;border-color:#c62f22!important}
body.sv .sv-rbadge{display:flex;align-items:center;gap:7px;z-index:22;padding:6px 11px;border-radius:999px;background:rgba(0,0,0,.6);color:#fff;font:800 12px/1 var(--body,inherit);opacity:0;transition:opacity .2s;pointer-events:none}
body.sv .sv-rbadge i{width:8px;height:8px;border-radius:50%;background:#ff3b30;box-shadow:0 0 8px #ff3b30;animation:svBlink 1.2s infinite}body.sv .sv-rbadge small{font-weight:600;color:#bbb}
body.sv .sv-rbadge[hidden]{display:none}body.sv.sv-recmode .sv-rbadge.peek{opacity:1;pointer-events:auto;cursor:pointer}
body.sv .sv-count{display:grid;place-items:center;z-index:30;pointer-events:none;font:900 calc(150px * var(--svu,1))/1 var(--body,inherit);color:#fff;text-shadow:0 0 40px rgba(246,168,1,.7)}
body.sv .sv-count[hidden]{display:none}body.sv .sv-count.go{animation:svCount .8s ease-out both}
@keyframes svCount{from{opacity:0;transform:scale(1.5)}25%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.85)}}
body.sv.sv-recmode .sv-ctl,body.sv.sv-recmode .sv-tip{opacity:0!important;pointer-events:none!important;display:none!important}
body.sv .sv-done{display:flex;flex-direction:column;gap:10px;z-index:40;padding:14px;border-radius:20px;background:rgba(16,15,13,.96);box-shadow:0 0 0 1px rgba(246,168,1,.35),0 30px 70px rgba(0,0,0,.7);font-family:var(--body,inherit);box-sizing:border-box}
body.sv .sv-done[hidden]{display:none}
body.sv .sv-dh{display:flex;align-items:center}body.sv .sv-dh b{flex:1;font:800 16px/1 var(--body,inherit);color:#F6A801}
body.sv .sv-x{width:30px;height:30px;border-radius:50%;border:0;background:#2a2723;color:#eee;font-size:18px;cursor:pointer}
body.sv .sv-done video{width:100%;max-height:52vh;border-radius:12px;background:#000;object-fit:contain}
body.sv .sv-dr{display:flex;flex-wrap:wrap;gap:8px}body.sv .sv-pri{background:#F6A801!important;color:#111!important;border-color:#F6A801!important}
body.sv .sv-dn{margin:0;font:600 11.5px/1.45 var(--body,inherit);color:#8c8371}
body.sv .sv-tip{display:flex;flex-direction:column;gap:5px;z-index:21;padding:12px 14px;border-radius:16px;background:rgba(14,13,12,.92);box-shadow:0 0 0 1px rgba(246,168,1,.35),0 18px 40px rgba(0,0,0,.5);font:600 12px/1.4 var(--body,inherit);color:#e2d9c8;box-sizing:border-box}
body.sv .sv-tip[hidden]{display:none}body.sv .sv-tip b{color:#F6A801;font-size:13px}
/* ---- video card: shape, border, corner resize (switch: videoplus) ---- */
.cam .cam-rs{position:absolute;right:4px;bottom:4px;width:18px;height:18px;cursor:nwse-resize;opacity:0;transition:opacity .2s;background:linear-gradient(135deg,transparent 0 50%,rgba(255,255,255,.75) 50% 58%,transparent 58% 68%,rgba(255,255,255,.75) 68% 76%,transparent 76%);border-radius:0 0 12px 0}
.cam:hover .cam-rs{opacity:1}
/* layer: behind the rig sits under the keys and panels (still over the page background) */
.cam.cam-back{z-index:1!important}
body.cam-peek .cam.cam-back{z-index:70!important;outline:2px dashed #F6A801;outline-offset:3px}
.cam .cam-ly{position:absolute;top:8px;right:40px;width:26px;height:26px;border-radius:50%;border:0;padding:0;display:grid;place-items:center;cursor:pointer;color:#fff;background:rgba(20,18,16,.5);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 0 0 1px rgba(255,255,255,.14);opacity:0;transition:opacity .2s;z-index:3}
.cam:hover .cam-ly,.cam .cam-ly:focus-visible{opacity:1}@media (hover:none){.cam .cam-ly{opacity:.8}}
.cam .cam-ly[aria-pressed="true"]{color:#F6A801}
.cam .cam-fit{position:absolute;top:8px;right:72px;width:26px;height:26px;border-radius:50%;border:0;padding:0;display:grid;place-items:center;cursor:pointer;color:#fff;background:rgba(20,18,16,.5);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 0 0 1px rgba(255,255,255,.14);opacity:0;transition:opacity .2s;z-index:3}
.cam:hover .cam-fit,.cam .cam-fit:focus-visible{opacity:1}@media (hover:none){.cam .cam-fit{opacity:.8}}
.cam .cam-fit:hover{color:#F6A801}
.cam.cam-circle .cam-fit{top:12%;right:calc(12% + 64px)}
html.ffo-videoplus:where(:not(.fft-videoplus)) .cam .cam-fit,body.sv .cam .cam-fit,html.ffo-camfx:where(:not(.fft-camfx)) .cam .cam-fit{display:none!important}
.cam.cam-fitting::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 3px #F6A801;animation:camFit .6s ease-in-out infinite alternate;pointer-events:none;z-index:4}
@keyframes camFit{from{opacity:.35}to{opacity:1}}
.cam .cam-oct{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);display:flex;align-items:center;gap:4px;padding:3px;border-radius:999px;background:rgba(20,18,16,.78);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 0 0 1px rgba(246,168,1,.45);z-index:5;white-space:nowrap}
.cam .cam-oct[hidden]{display:none}
.cam .cam-oct span{font:800 11.5px/1 Nunito,sans-serif;color:#fff;padding:0 4px;letter-spacing:.02em}
.cam .cam-oct button{width:24px;height:24px;border-radius:50%;border:0;padding:0;display:grid;place-items:center;cursor:pointer;background:rgba(255,255,255,.1);color:#fff;font:700 10px/1 sans-serif}
.cam .cam-oct button:hover{background:#F6A801;color:#111}
.cam .cam-oct .cam-oct-ok{background:#F6A801;color:#111;font-size:12px}
.cam .cam-oct button.cam-fb{width:auto;padding:0 11px;border-radius:999px;font:800 11.5px/1 Nunito,sans-serif}
.cam .cam-fail button[data-f="x"]{font-size:15px}
.cam-mk{position:fixed;inset:0;z-index:9990;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:rgba(10,9,8,.9);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);outline:0}
.cam-mk-h{display:flex;align-items:center;gap:12px;max-width:92vw;padding:10px 18px 10px 10px;border-radius:999px;background:#1d1b18;border:1px solid #5a400a;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.cam-mk-n{flex:none;padding:7px 12px;border-radius:999px;background:#F6A801;color:#111;font:800 12px/1 Nunito,sans-serif}
.cam-mk-t{font:700 15px/1.3 Nunito,sans-serif;color:#FBF6EC}
.cam-mk-c{display:block;border-radius:14px;cursor:crosshair;box-shadow:0 0 0 1px rgba(255,255,255,.12),0 24px 60px rgba(0,0,0,.6)}
.cam-mk-f{display:flex;gap:10px}
.cam-mk-b{height:38px;padding:0 20px;border-radius:999px;border:1px solid #3a3630;background:#1d1b18;color:#FBF6EC;font:800 13px/1 Nunito,sans-serif;cursor:pointer}
.cam-mk-b:hover:not(:disabled){border-color:#F6A801;color:#F6A801}.cam-mk-b:disabled{opacity:.4;cursor:default}
.cam.cam-circle .cam-ly{top:12%;right:calc(12% + 32px)}
html.ffo-videoplus:where(:not(.fft-videoplus)) .cam .cam-ly,body.sv .cam .cam-ly{display:none!important}
.cam .cam-e{position:absolute;z-index:3;opacity:0;transition:opacity .2s;touch-action:none}
.cam .cam-e::after{content:"";position:absolute;left:50%;top:50%;translate:-50% -50%;border-radius:3px;background:rgba(255,255,255,.85);box-shadow:0 0 0 1px rgba(0,0,0,.45),0 1px 4px rgba(0,0,0,.5)}
.cam .cam-e[data-e=t],.cam .cam-e[data-e=b]{left:32%;right:32%;height:16px;cursor:ns-resize}.cam .cam-e[data-e=t]{top:0}.cam .cam-e[data-e=b]{bottom:0}
.cam .cam-e[data-e=t]::after,.cam .cam-e[data-e=b]::after{width:38px;height:4px}
.cam .cam-e[data-e=l],.cam .cam-e[data-e=r]{top:32%;bottom:32%;width:16px;cursor:ew-resize}.cam .cam-e[data-e=l]{left:0}.cam .cam-e[data-e=r]{right:0}
.cam .cam-e[data-e=l]::after,.cam .cam-e[data-e=r]::after{width:4px;height:38px}
.cam:hover .cam-e,.cam.cropping .cam-e{opacity:1}@media (hover:none){.cam .cam-e{opacity:.75}}
.cam.cam-circle .cam-e,html.ffo-videoplus:where(:not(.fft-videoplus)) .cam .cam-e,html.ffo-camfx:where(:not(.fft-camfx)) .cam .cam-e,body.sv .cam .cam-e{display:none!important}
.cam.cropping{outline:2px dashed rgba(255,255,255,.7);outline-offset:-2px}
html.ffo-videoplus:where(:not(.fft-videoplus)) .cam .cam-rs,html.ffo-videoplus:where(:not(.fft-videoplus)) .vd-plus,html.ffo-videoplus:where(:not(.fft-videoplus)) .vd-back{display:none!important}
.cam.cam-circle{aspect-ratio:1;border-radius:50%}
.cam.cam-circle canvas{object-fit:cover}
.cam.cam-circle .cam-rs{right:14%;bottom:14%;border-radius:0}
.cam.cam-circle .cam-x{top:12%;right:12%}
.cam.cam-sharp{border-radius:4px}
.cam[data-bc="none"]{box-shadow:0 18px 40px rgba(0,0,0,.55)!important}
.cam[data-bc="key"]{box-shadow:0 0 0 3px var(--kl,#F6A801),0 18px 40px rgba(0,0,0,.55)!important}
.cam[data-bc="white"]{box-shadow:0 0 0 3px #fff,0 18px 40px rgba(0,0,0,.55)!important}
.cam[data-bc="custom"]{box-shadow:0 0 0 3px var(--cbc,#F6A801),0 18px 40px rgba(0,0,0,.55)!important}
/* ---- video bubble, Loom style: a soft layered shadow so it floats, a hairline light ring, a gentle glass edge,
a small lift on hover and a pop when it appears. Your border choice (key colour, white, custom) still sits on top ---- */
.cam{--cam-sh:0 1px 2px rgba(0,0,0,.30),0 6px 14px rgba(0,0,0,.28),0 22px 48px rgba(0,0,0,.42),0 44px 90px rgba(0,0,0,.30);
box-shadow:0 0 0 1px rgba(255,255,255,.10),var(--cam-sh);transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s ease;animation:camIn .42s cubic-bezier(.2,.9,.25,1.15) backwards;will-change:transform}
.cam::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;
box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 0 1px rgba(255,255,255,.07),inset 0 -40px 60px -30px rgba(0,0,0,.35);
background:linear-gradient(160deg,rgba(255,255,255,.10),transparent 32%)}
.cam .cam-x,.cam .cam-rs,.cam .cam-msg{z-index:3}
.cam:hover{transform:none} /* no lift on hover: the window stays exactly where and how big it is while you resize or crop it */
.cam.drag{transform:none;--cam-sh:0 2px 4px rgba(0,0,0,.3),0 12px 24px rgba(0,0,0,.32),0 34px 70px rgba(0,0,0,.45),0 60px 120px rgba(0,0,0,.32)}
@keyframes camIn{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:none}}
.cam .cam-x{background:rgba(20,18,16,.5);-webkit-backdrop-filter:blur(10px) saturate(1.4);backdrop-filter:blur(10px) saturate(1.4);box-shadow:0 0 0 1px rgba(255,255,255,.14),0 4px 10px rgba(0,0,0,.35)}
.cam[data-bc="none"]{box-shadow:var(--cam-sh)!important}
.cam[data-bc="key"]{box-shadow:0 0 0 3px var(--kl,#F6A801),var(--cam-sh)!important}
.cam[data-bc="white"]{box-shadow:0 0 0 3px #fff,var(--cam-sh)!important}
.cam[data-bc="custom"]{box-shadow:0 0 0 3px var(--cbc,#F6A801),var(--cam-sh)!important}
.cam.cam-keyed{box-shadow:none!important;animation:none}.cam.cam-keyed::after{display:none}
@media (prefers-reduced-motion:reduce){.cam{animation:none;transition:none}.cam:hover,.cam.drag{transform:none}}
.vd-bc{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.vd-bc button{height:30px;padding:0 12px;border-radius:999px;border:1px solid #34302a;background:#1d1b18;color:#bfb6a4;font:800 12.5px/1 var(--body);cursor:pointer}
.vd-bc button[aria-checked="true"]{background:var(--yellow);border-color:var(--yellow);color:#111}
.vd-bcc{width:28px;height:28px;border-radius:50%;display:inline-block}
.vd-back{justify-self:start}
/* ---- Admin panel (admin key only) ---- */
.ap-tab{position:fixed;left:0;top:50%;z-index:310;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:30px;height:96px;padding:0;border:0;border-radius:0 12px 12px 0;background:var(--kl,#F6A801);color:var(--kl-ink,#111);cursor:pointer;box-shadow:4px 0 16px rgba(0,0,0,.45)}
.ap-tab{display:none!important} /* the admin panel opens from the profile (your initial, top right) */
.ap-pvbar{display:none}
html.ap-preview .ap-pvbar{display:flex;position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:320;align-items:center;gap:8px;padding:6px 6px 6px 14px;border-radius:999px;background:#FBF6EC;color:#111;box-shadow:0 10px 30px rgba(0,0,0,.5);font:800 13px/1 var(--body)}
.ap-pvbar button{border:0;border-radius:999px;padding:8px 12px;font:800 12.5px/1 var(--body);cursor:pointer;background:#111;color:#FBF6EC}.ap-pvbar button[data-pvb="panel"]{background:transparent;color:#111;border:1px solid #111}
.cw-adm,.ch1-who .cw-org,.ch1-who .cw-bill{display:block;width:100%;margin-top:8px;padding:9px 12px;border-radius:10px;border:1px solid var(--kl,#F6A801);background:transparent;color:var(--kl,#F6A801);font:800 13px/1 var(--body);cursor:pointer;text-align:center}.cw-adm[hidden],.ch1-who .cw-org[hidden],.ch1-who .cw-bill[hidden]{display:none}.cw-adm:hover,.ch1-who .cw-org:hover,.ch1-who .cw-bill:hover{background:var(--kl,#F6A801);color:#111}
.ap-tab span{writing-mode:vertical-rl;transform:rotate(180deg);font:900 11.5px/1 var(--body);letter-spacing:.16em;text-transform:uppercase}
html.ap-preview .ap-tab{background:#FBF6EC;color:#111}
body.ap-open .ap-tab{left:min(440px,92vw)}
.ap{position:fixed;left:0;top:0;bottom:0;z-index:315;width:min(440px,92vw);box-sizing:border-box;display:flex;flex-direction:column;gap:10px;padding:16px 14px 12px;background:#141311;border-right:1px solid #34302a;border-top:3px solid var(--kl,#F6A801);box-shadow:18px 0 50px rgba(0,0,0,.6);color:var(--cream);font-family:var(--body);animation:apIn .22s ease-out}
.ap[hidden]{display:none}
@keyframes apIn{from{transform:translateX(-24px);opacity:0}}
.ap-h{display:flex;align-items:center;justify-content:space-between}
.ap-h b{display:block;font:700 22px/1.1 'Fredoka',var(--body);color:var(--kl,#F6A801)}.ap-h span{font:700 12.5px/1.4 var(--body);color:#8a8170}
.ap-x{width:32px;height:32px;border-radius:50%;border:0;background:#26231e;color:#e8e0d0;font-size:20px;cursor:pointer}
.ap-dash{margin-left:auto;margin-right:8px;align-self:center;height:28px;display:inline-flex;align-items:center;padding:0 12px;border-radius:999px;background:#F6A801;color:#111!important;font-weight:600;font-size:12.5px;line-height:1;text-decoration:none!important;white-space:nowrap}.ap-dash:hover{filter:brightness(1.08)}
.ap-pv{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:12px;background:#1d1b18;border:1px solid #34302a;cursor:pointer}
.ap-pv input{margin-top:3px;accent-color:var(--kl,#F6A801);width:16px;height:16px}
.ap-pv b{display:block;font-size:14px}.ap-pv small{display:block;font-size:12px;color:#8a8170;margin-top:2px}
.ap-pvs{flex-direction:column;align-items:stretch;gap:8px;cursor:default}
.ap-seg{display:grid;grid-template-columns:repeat(4,1fr);padding:3px;border-radius:999px;background:#111;border:1px solid #34302a}
.ap-seg button{height:28px;border:0;border-radius:999px;background:none;color:#a99f8e;font:800 12.5px/1 var(--body);cursor:pointer}
.ap-seg button[aria-checked="true"]{background:var(--kl,#F6A801);color:#111}
.ap-tools{display:flex;align-items:center;gap:10px}
.ap-ids{flex:none;display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 10px;border-radius:999px;border:1px solid #3a3630;font:800 12.5px var(--body);color:#cfc6b4;cursor:pointer}
.ap-ids input{accent-color:var(--yellow);margin:0}
.fid-layer{position:fixed;inset:0;z-index:312;pointer-events:none}
.fid{position:fixed;pointer-events:auto;font:800 10.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;padding:3px 5px;border-radius:5px;background:rgba(17,17,17,.92);border:1px solid;white-space:nowrap;cursor:help;box-shadow:0 2px 6px rgba(0,0,0,.5)}
.fid.s-on{border-color:#3ecf6e;color:#86f0ab}
.fid.s-tz{border-color:#F6A801;color:#ffd067}
.fid.s-off{border-color:#8a8172;color:#d8cfbd}
.fid.me-off{border-style:dashed}
.fid-hl{position:fixed;border:2px solid #F6A801;border-radius:10px;box-shadow:0 0 0 4px rgba(246,168,1,.22),0 0 26px rgba(246,168,1,.35);animation:fidP 1.1s ease-in-out infinite;pointer-events:none}
.fid-hl b{position:absolute;left:-2px;top:-21px;font:800 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;background:#F6A801;color:#111;padding:3px 6px;border-radius:5px}
@keyframes fidP{50%{box-shadow:0 0 0 7px rgba(246,168,1,.12),0 0 34px rgba(246,168,1,.5)}}
.ap-sort{flex:none;height:36px;padding:0 12px;border-radius:10px;border:1px solid #34302a;background:#1d1b18;color:#e8e0d0;font:800 12px/1 var(--body);cursor:pointer;white-space:nowrap}
.ap-sort::before{content:"↕ ";color:var(--kl,#F6A801)}
.ap-it.ap-d1{margin-left:18px;position:relative}.ap-it.ap-d2{margin-left:36px;position:relative}.ap-it.ap-d3{margin-left:54px;position:relative}
.ap-it.ap-d1::before,.ap-it.ap-d2::before,.ap-it.ap-d3::before{content:"";position:absolute;left:-11px;top:-7px;width:8px;height:calc(50% + 7px);border-left:2px solid #3a3630;border-bottom:2px solid #3a3630;border-bottom-left-radius:6px}
.ap-kids{display:inline-block;margin-top:3px;font:800 10px/1 var(--body);font-style:normal;letter-spacing:.06em;text-transform:uppercase;color:#8a8170}
.ap-need{display:inline-flex;align-items:center;align-self:center;flex:none;max-width:150px;height:22px;padding:0 8px;border-radius:999px;border:1px solid #3a3630;background:transparent;color:#8a8170;font:800 10.5px/1 var(--body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
button.ap-need.bad{border-color:#7a3a2a;color:#ff9a7a;background:rgba(255,90,50,.08);cursor:pointer;max-width:190px}
button.ap-need.bad:hover{border-color:#ff9a7a}
.ap-tools input{flex:1;height:36px;border-radius:10px;border:1px solid #34302a;background:#1d1b18;color:#e8e0d0;padding:0 12px;font:700 13.5px var(--body)}
.ap-st{font:800 12px var(--body);color:var(--kl,#F6A801);white-space:nowrap}.ap-st.bad{color:#ff8a7a}
/* the build this screen is running, and whether it is the latest (admins only, 2026-10-27) */
.ap-build{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;margin:0 0 10px;padding:8px 12px;border-radius:12px;background:#141311;border:1px solid #2c2a26;font:700 12px/1.3 var(--body);color:#a99f8e}
.ap-build code{font:700 12px/1 ui-monospace,Menlo,monospace;color:#FBF6EC;background:#24211c;padding:3px 6px;border-radius:6px;cursor:copy}
.ap-build .apb-ok{color:#3ecf6e}.ap-build .apb-new{color:#ffc93d}
.ap-build button{margin-left:auto;height:26px;padding:0 12px;border-radius:999px;border:0;background:#F6A801;color:#111;font:800 12px/1 var(--body);cursor:pointer}
.ap-list{flex:1;overflow:auto;display:flex;flex-direction:column;gap:6px;padding-right:2px}
.ap-it{border-radius:12px;background:#1b1a17;border:1px solid #2c2a26}
.ap-it.on{border-color:color-mix(in srgb,var(--kl,#F6A801) 40%,#2c2a26)}
.ap-row{display:flex;align-items:center;gap:10px;padding:8px 10px 8px 12px}
.ap-more{flex:1;min-width:0;text-align:left;border:0;background:none;color:inherit;cursor:pointer;padding:0}
.ap-more b{display:block;font:800 14px/1.25 var(--body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ap-more small{display:block;font:700 11.5px/1.3 var(--body);color:#7d7566;margin-top:2px}
.ap-sw{flex:none;position:relative;width:44px;height:26px;border-radius:999px;border:0;background:#3a3630;cursor:pointer;transition:background .15s}
.ap-sw i{position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#cfc6b4;transition:transform .15s,background .15s}
.ap-sw[aria-checked="true"]{background:var(--kl,#F6A801)}.ap-sw[aria-checked="true"] i{transform:translateX(18px);background:#111}
.ap-sws{display:flex;gap:8px;flex:none}
.ap-tz[aria-checked="true"]{background:repeating-linear-gradient(135deg,var(--kl,#F6A801) 0 5px,color-mix(in srgb,var(--kl,#F6A801) 70%,#111) 5px 10px)}
.ap-it.tz{border-color:color-mix(in srgb,var(--kl,#F6A801) 30%,#2c2a26);border-style:dashed}
.ap-l{display:flex;flex-direction:column;align-items:center;gap:3px}
.ap-l small{font:900 8.5px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:#8a8170}
.ap-me[aria-checked="true"]{background:color-mix(in srgb,var(--kl,#F6A801) 55%,#3a3630)}
.mf-row{grid-template-columns:1fr}
.mf-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 14px}
.mf-list[hidden]{display:none}
.mf-it{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 8px 6px 10px;border-radius:10px;background:#1b1a17;font:700 13px/1.25 var(--body);color:#cfc6b4}
@media (max-width:620px){.mf-list{grid-template-columns:1fr}}
.ap-d{padding:0 12px 10px;font:600 12.5px/1.45 var(--body);color:#a99f8c}
.ap-d p{margin:0 0 8px}
.ap-d label{display:flex;flex-direction:column;gap:5px;font-weight:800;color:#cfc6b4}
.ap-d input{height:32px;border-radius:8px;border:1px solid #34302a;background:#141311;color:#e8e0d0;padding:0 10px;font:600 12.5px var(--body)}
.ap-none{color:#7d7566;font-size:13px;text-align:center}
.ap-ft{margin:0;font:600 11.5px/1.45 var(--body);color:#6f685c}
.ap-fr{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:12px;padding:12px;border-radius:12px;border:1px solid #4a2a22;background:#1f1614}
.ap-fr>div:first-child{flex:1 1 200px;display:flex;flex-direction:column;gap:3px;min-width:0}
.ap-fr b{font:800 13px/1.2 var(--body);color:#FBF6EC}.ap-fr small{font:600 11.5px/1.4 var(--body);color:#a99f8e}
.ap-fr button{height:32px;padding:0 14px;border-radius:999px;font:800 12.5px/1 var(--body);cursor:pointer}
.ap-frb,.ap-fry{border:0;background:#d8452f;color:#fff}.ap-frn{border:1px solid #3a3630;background:transparent;color:#cfc6b4}
.ap-frc{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.ap-frc[hidden]{display:none}.ap-frc span{font:700 12.5px/1.2 var(--body);color:#ffb4a6}
.ap-fr button:focus-visible{outline:2px solid var(--kl,#F6A801);outline-offset:2px}
.ap-more em{display:block;font:600 12px/1.35 var(--body);font-style:normal;color:#b9ae99;margin-top:2px;white-space:normal}
.ap-d input.ap-nm,.ap-d input.ap-tp{margin-bottom:8px}
.mf-q{grid-column:1/-1;height:36px;border-radius:10px;border:1px solid #34302a;background:#1d1b18;color:#e8e0d0;padding:0 12px;font:700 13.5px var(--body)}
.mf-it[hidden]{display:none}
.mf-it span{min-width:0}.mf-it span b{display:block;font:800 13px/1.25 var(--body);color:#e8e0d0}.mf-it span small{display:block;font:600 11.5px/1.35 var(--body);color:#8a8170;margin-top:2px}
.mf-it{align-items:center}
.mf-none{grid-column:1/-1;margin:4px 0;color:#7d7566;font-size:13px;text-align:center}
/* ---- Advanced: one calm box with pages ---- */
body.solo .adv-card{max-width:780px;height:min(680px,calc(100dvh - 32px));display:flex;flex-direction:column;overflow:hidden;padding-bottom:0!important}
body.solo .adv-card .hc-h{margin-bottom:12px}
body.solo .adv .hc-tabs{flex:none;margin-bottom:12px}
body.solo .adv-body{flex:1;min-height:0;overflow:auto;margin:0 -8px;padding:0 8px 18px;scrollbar-width:thin;scrollbar-color:#4a443b transparent}
body.solo .adv-body::-webkit-scrollbar{width:8px}body.solo .adv-body::-webkit-scrollbar-thumb{background:#4a443b;border-radius:8px}body.solo .adv-body::-webkit-scrollbar-track{background:transparent}
body.solo .adv-pane{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-content:start}
body.solo .adv-pane[hidden]{display:none}
body.solo .adv-pane>*,body.solo .adv-pane .adv-row,body.solo .adv-pane .kl-inline,body.solo .adv-pane .adv-reset{grid-column:auto}
body.solo .adv-pane .adv-wide,body.solo .adv-pane .adv-pg,body.solo .adv-pane .vd-cred,body.solo .adv-pane .adv-reset{grid-column:1/-1}
body.solo .adv-pane[data-pg-on="0"] [data-pg]:not([data-pg="0"]),body.solo .adv-pane[data-pg-on="1"] [data-pg]:not([data-pg="1"]),body.solo .adv-pane[data-pg-on="2"] [data-pg]:not([data-pg="2"]),body.solo .adv-pane[data-pg-on="3"] [data-pg]:not([data-pg="3"]),body.solo .adv-pane[data-pg-on="4"] [data-pg]:not([data-pg="4"]),body.solo .adv-pane[data-pg-on="5"] [data-pg]:not([data-pg="5"]){display:none!important}
.adv-pg{position:sticky;top:0;z-index:2;display:flex;flex-wrap:wrap;gap:6px;padding:2px 0 10px;background:linear-gradient(180deg,#201d19 85%,rgba(32,29,25,0))}
.adv-pg button{height:30px;padding:0 14px;border-radius:999px;border:1px solid #3a3630;background:#1b1916;color:#bfb6a4;font:800 12.5px/1 var(--body);cursor:pointer}
.adv-pg button[aria-selected="true"]{background:var(--kl,#F6A801);border-color:var(--kl,#F6A801);color:var(--kl-ink,#111)}
.adv-pg button[hidden]{display:none}
body.solo .adv-pane .adv-row{padding:11px 13px;gap:8px 12px;align-content:start}
body.solo .adv-l h3{font-size:15.5px}
body.solo .adv-l p{font-size:12.5px;line-height:1.38}
body.solo .adv-pane .adv-row:not(.adv-wide) .adv-seg{width:100%}
@media (max-width:700px){body.solo .adv-pane{grid-template-columns:1fr}body.solo .adv-card{height:calc(100dvh - 20px)}}
/* admin panel: a floating card with breathing room, groups as chips */
.ap{left:16px!important;top:16px!important;bottom:16px!important;width:min(460px,calc(100vw - 32px))!important;border:1px solid #34302a!important;border-top:3px solid var(--kl,#F6A801)!important;border-radius:20px;padding:18px 16px 14px!important;gap:12px!important}
body.ap-open .ap-tab{left:calc(min(460px,100vw - 32px) + 16px)!important;border-radius:0 12px 12px 0}
.ap-cats{display:flex;flex-wrap:wrap;gap:6px}
/* ---- Admin panel v2: Status + Tier per feature, tier strip, list or tiers board ---- */
/* Admin and Settings stay in TCH yellow whatever colour the keys light up in */
body.solo .ap2,body.solo .ap-tab,body.solo .adv-card,body.solo .adv-wrap,body.solo #advBtn{--kl:#F6A801;--kl-ink:#111}
.ap2{--t-free:#cfc6b4;--t-plus:#ffe08a;--t-pro:#ffb84d;--t-ultra:#F6A801}
.ap2 .ap-tiers{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.ap2 .ap-tc{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:8px 10px;border-radius:12px;border:1px solid #34302a;background:#1b1a17;color:#e8e0d0;cursor:pointer;text-align:left;font-family:var(--body)}
.ap2 .ap-tc b{font:800 13px/1 var(--body);letter-spacing:.02em}
.ap2 .ap-tc span{font:800 15px/1.1 var(--body);color:#fff}
.ap2 .ap-tc small{font:700 10.5px/1.2 var(--body);color:#8a8170}
.ap2 .ap-t-free b{color:var(--t-free)}.ap2 .ap-t-plus b{color:var(--t-plus)}.ap2 .ap-t-pro b{color:var(--t-pro)}.ap2 .ap-t-ultra b{color:var(--t-ultra)}
.ap2 .ap-tc[aria-pressed="true"]{border-color:currentColor;box-shadow:inset 0 0 0 1px #F6A801;background:#24211b}
.ap2 .ap-seg6{grid-template-columns:repeat(6,1fr)}
.ap2 .ap-seg6 button{font-size:11.5px}
.ap2 .ap-view{flex:none;display:grid;grid-template-columns:1fr 1fr;width:118px}
.ap2 .ap-sug{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;border:1px dashed #6b5320;background:rgba(246,168,1,.06)}
.ap2 .ap-sug[hidden]{display:none}
.ap2 .ap-sug div{flex:1;min-width:0}.ap2 .ap-sug b{display:block;font:800 13px/1.2 var(--body);color:#ffd067}.ap2 .ap-sug small{display:block;margin-top:3px;font:600 11.5px/1.4 var(--body);color:#a99f8e}
.ap2 .ap-sugb{flex:none;height:32px;padding:0 14px;border-radius:999px;border:0;background:var(--kl,#F6A801);color:#111;font:800 12.5px/1 var(--body);cursor:pointer}
.ap2 .ap-row{flex-wrap:wrap;row-gap:8px}
.ap2 .ap-more{flex:1 1 180px}
.ap2 .ap-ctl{display:flex;gap:6px;flex:none;margin-left:auto}
.ap2 .ap-ss{display:inline-flex;padding:2px;border-radius:999px;background:#111;border:1px solid #34302a}
/* features are edited in ch admin (Firestore) now: the rig panel shows them read-only */
.ap2 .ap-home{display:flex;flex-direction:column;gap:3px;margin:0 0 12px;padding:12px 14px;border-radius:14px;background:#2a1d04;border:1px solid #5a400a;text-decoration:none;color:#FBF6EC}
.ap2 .ap-home b{font:800 13.5px/1.3 var(--body);color:#ffc93d}.ap2 .ap-home span{font:700 12px/1.4 var(--body);color:#cfc6b4}
.ap2 .ap-home:hover{border-color:#F6A801}
.ap2 .ap-ctl,.ap2 .ap-sug,.ap2 .ap-mv,.ap2 .ap-sw2,.ap2 .ap-use{pointer-events:none;opacity:.55}
.ap2 .ap-d input.ap-nm,.ap2 .ap-d input.ap-tp,.ap2 .ap-d input.ap-em{pointer-events:none;opacity:.6}
.ap2 .ap-ss button{height:24px;padding:0 8px;border:0;border-radius:999px;background:none;color:#8a8170;font:800 11px/1 var(--body);cursor:pointer;white-space:nowrap}
.ap2 .ap-ss button:hover{color:#e8e0d0}
.ap2 .ap-ss.st button[aria-checked="true"][data-st="On"]{background:#3ecf6e;color:#062a12}
.ap2 .ap-ss.st button[aria-checked="true"][data-st="Teaser"]{background:repeating-linear-gradient(135deg,#F6A801 0 5px,#d18f00 5px 10px);color:#111}
.ap2 .ap-ss.st button[aria-checked="true"][data-st="Off"]{background:#3a3630;color:#e8e0d0}
.ap2 .ap-ss.tr button[aria-checked="true"]{color:#111}
.ap2 .ap-ss.tr button[aria-checked="true"][data-tr="Free"]{background:var(--t-free)}.ap2 .ap-ss.tr button[aria-checked="true"][data-tr="Plus"]{background:var(--t-plus)}
.ap2 .ap-ss.tr button[aria-checked="true"][data-tr="Pro"]{background:var(--t-pro)}.ap2 .ap-ss.tr button[aria-checked="true"][data-tr="Ultra"]{background:var(--t-ultra)}
.ap2 .ap-it:not(.on):not(.tz) .ap-more b{color:#a99f8e}
.ap2 .ap-meta{font:700 11.5px/1.4 var(--body);color:#7d7566}
.ap2 .ap-use{height:20px;padding:0 8px;border-radius:999px;border:1px solid #6b5320;background:none;color:#ffd067;font:800 11px/1 var(--body);cursor:pointer}
.ap2 .ap-need{display:block;max-width:none;height:auto;padding:6px 10px;border-radius:8px;background:#141311;font:600 12px/1.4 var(--body);color:#a99f8e}
.ap2 .ap-need.bad{color:#ffb3a6;background:rgba(216,69,47,.12)}
.ap2 .ap-sw2{display:flex;gap:16px;margin:8px 0 10px}
.ap2 .ap-sw2 label{flex-direction:row!important;align-items:center;gap:8px!important;font:700 12.5px var(--body)!important;color:#cfc6b4}
.ap2 .ap-list.ap-isboard{display:block}
.ap2 .ap-board{display:flex;flex-direction:column;gap:8px}
.ap2 .ap-col{display:flex;flex-wrap:wrap;align-content:flex-start;gap:5px;padding:8px;border-radius:12px;background:#171613;border:1px solid #2c2a26;min-width:0}
.ap2 .ap-col h4{flex:1 1 100%;display:flex;align-items:center;justify-content:space-between;margin:0 2px 2px;font:800 12.5px/1 var(--body);letter-spacing:.04em}
.ap2 .ap-col h4 i{font-style:normal;font-size:10.5px;color:#8a8170}
.ap2 .ap-col.ap-t-free h4{color:var(--t-free)}.ap2 .ap-col.ap-t-plus h4{color:var(--t-plus)}.ap2 .ap-col.ap-t-pro h4{color:var(--t-pro)}.ap2 .ap-col.ap-t-ultra h4{color:var(--t-ultra)}
.ap2 .ap-chip{display:inline-flex;align-items:center;gap:2px;max-width:100%;padding:3px;border-radius:8px;background:#211f1b;border:1px solid #2c2a26;font:700 11px/1.2 var(--body);color:#8a8170}
.ap2 .ap-chip.on{color:#e8e0d0;border-color:#3d3a33}.ap2 .ap-chip.tz{border-style:dashed;border-color:#6b5320;color:#ffd067}
.ap2 .ap-chip span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 2px}
.ap2 .ap-mv{flex:none;width:18px;height:20px;border:0;border-radius:5px;background:none;color:#8a8170;font:900 13px/1 var(--body);cursor:pointer;padding:0}
.ap2 .ap-mv:hover:not(:disabled){background:#34302a;color:#fff}.ap2 .ap-mv:disabled{opacity:.2;cursor:default}
.ap2 .ap-more2{border-top:1px solid #2c2a26;padding-top:8px}
.ap2 .ap-more2 summary{cursor:pointer;font:800 12px/1.4 var(--body);color:#8a8170;list-style:none}
.ap2 .ap-more2 summary::before{content:"▸ ";color:#F6A801}.ap2 .ap-more2[open] summary::before{content:"▾ "}
.ap2 .ap-more2>.ap-ids,.ap2 .ap-more2>.ap-sort{margin:8px 8px 0 0}
.ap2 .ap-fb summary .ap-fbs{color:#5f584c;font-weight:700;margin-left:6px}
.ap2 .ap-tiers,.ap2 .ap-tools,.ap2 .ap-cats,.ap2 .ap-sug,.ap2 .ap-list,.ap2 .ap-fb,.ap2 #apCount,.ap2 .ap-sort{display:none!important} /* the rig keeps only what is about this screen: See ch1 as, feature IDs, factory reset. The rest is in ch admin */
.ap2 .ap-fbw{display:flex;flex-direction:column;gap:8px;margin-top:8px;max-height:min(52vh,460px);overflow-y:auto;overscroll-behavior:contain;padding-right:4px} /* scrolls on its own, never cut off by the panel */
.ap2 .ap-fbme{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;font:600 12px/1.4 var(--body);color:#cfc6b4}
.ap2 .ap-fbme b{color:#FBF6EC}
.ap2 .ap-fbg,.ap2 .ap-fbc{height:28px;padding:0 12px;border-radius:999px;border:1px solid #3a3630;background:#111;color:#FBF6EC;font:800 11.5px/1 var(--body);cursor:pointer}
.ap2 .ap-fbg:hover,.ap2 .ap-fbc:hover{border-color:#F6A801}
.ap2 .ap-fbr{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;padding:10px 12px;border-radius:12px;border:1px solid #2c2a26;background:#171512}
.ap2 .ap-fbr.soon{opacity:.55}
.ap2 .ap-fbr>div:first-child{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 150px}
.ap2 .ap-fbr b{font:800 13px/1.2 var(--body);color:#FBF6EC}.ap2 .ap-fbr small{font:600 11px/1.35 var(--body);color:#8a8170}
.ap2 .ap-fbx{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.ap2 .ap-fbx label{display:flex;align-items:center;justify-content:flex-end;gap:8px;font:700 10.5px/1 var(--body);color:#8a8170;text-transform:uppercase;letter-spacing:.06em}
.ap2 .ap-fbx .ap-ss{width:236px;display:flex}.ap2 .ap-fbx .ap-ss button{flex:1 1 0;padding:0 4px}
.ap2 .ap-ss.fbr button[aria-checked="true"]{background:#F6A801;color:#111}
.ap2 .ap-ss.fbr button[aria-checked="true"][data-fbm="sheet"]{background:#3a3630;color:#e8e0d0}
.ap2 .ap-ss.fbr button[aria-checked="true"][data-fbm="both"]{background:#7ed6c4;color:#062a24}
.ap2 .ap-ss.fbr.dev button[aria-checked="true"][data-fbm=""]{background:#2a2722;color:#cfc6b4}
.ap2 .ap-fbn,.ap2 .ap-fbm{margin:0;font:600 11.5px/1.45 var(--body);color:#a99f8e}.ap2 .ap-fbm{color:#F6A801}
.ap2 .ap-fbn code{font:700 11px/1 ui-monospace,monospace;color:#FBF6EC;background:#111;padding:1px 5px;border-radius:5px}
@media (max-width:520px){.ap2 .ap-fbx{align-items:stretch;width:100%}.ap2 .ap-fbx label{justify-content:space-between}}
@media (max-width:520px){.ap2 .ap-ctl{width:100%;justify-content:space-between}}
.ap2 .ap-h .ap-st{display:block;min-height:16px;margin-top:2px}
/* locked-feature badges carry their tier */
.ft-badge.ft-plus{color:#ffe08a;box-shadow:inset 0 0 0 1.5px #ffe08a,0 2px 8px rgba(0,0,0,.45)}
.ft-badge.ft-pro{color:#ffb84d;box-shadow:inset 0 0 0 1.5px #ffb84d,0 2px 8px rgba(0,0,0,.45)}
.ft-badge.ft-free{color:#cfc6b4;box-shadow:inset 0 0 0 1.5px #cfc6b4,0 2px 8px rgba(0,0,0,.45)}
.ft-badge.ft-ultra{color:#ff9a4d;box-shadow:inset 0 0 0 1.5px #ff9a4d,0 2px 8px rgba(0,0,0,.45)}
.ft-badge.ft-max{color:#F6A801;box-shadow:inset 0 0 0 1.5px #F6A801,0 2px 8px rgba(0,0,0,.45)}
.pg-left{margin:-2px 0 10px;font:700 13px/1.3 var(--body);color:#8a8170}.pg-left b{color:var(--kl,#F6A801);font-size:15px}
.ap-cats button{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px 0 12px;border-radius:999px;border:1px solid #34302a;background:#1d1b18;color:#bfb6a4;font:800 12px/1 var(--body);cursor:pointer}
.ap-cats button i{font-style:normal;font-size:10.5px;padding:2px 6px;border-radius:999px;background:#2a2722;color:#8a8170}
.ap-cats button[aria-pressed="true"]{background:var(--kl,#F6A801);border-color:var(--kl,#F6A801);color:var(--kl-ink,#111)}
.ap-cats button[aria-pressed="true"] i{background:rgba(0,0,0,.15);color:inherit}
.ap-list{scrollbar-width:thin;scrollbar-color:#4a443b transparent;gap:8px!important}
.ap-list::-webkit-scrollbar{width:8px}.ap-list::-webkit-scrollbar-thumb{background:#4a443b;border-radius:8px}
.ap-pv{padding:9px 12px!important}
.ap-ft{font-size:11px!important}
@media (max-width:620px){.ap{left:8px!important;top:8px!important;bottom:8px!important;width:calc(100vw - 16px)!important}body.ap-open .ap-tab{display:none}}
/* full screen exit (shown in full screen and in focus mode, where the header with the full-screen button is hidden) */
.fs-exit{display:none}
body.solo.fs-on .fs-exit{position:fixed;top:calc(10px + env(safe-area-inset-top,0px));right:calc(10px + env(safe-area-inset-right,0px));z-index:200;display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 12px;border-radius:999px;border:1px solid #3a3630;background:rgba(20,19,17,.82);color:#e8e0d0;font:800 12.5px/1 var(--body);cursor:pointer;opacity:.55;transition:opacity .2s;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
body.solo.fs-on .fs-exit:hover,body.solo.fs-on .fs-exit:focus-visible{opacity:1;outline:none;border-color:var(--kl,#F6A801)}
@media (hover:none){body.solo.fs-on .fs-exit{opacity:.85}body.solo.fs-on .fs-exit span{display:none}body.solo.fs-on .fs-exit{width:38px;height:38px;padding:0;justify-content:center}}
/* the Move grip says "Move" until you have used it once, then it is just the icon */
body.solo.kp-free.kp-seen .kp-grip{padding:0;width:30px;justify-content:center}
body.solo.kp-free.kp-seen .kp-grip .kp-w{display:none}
body.solo .rig-panel .dr-k{display:grid!important;grid-template-columns:repeat(2,auto);gap:2px 10px!important;align-content:center}
@media (max-width:620px){body.solo .rig-panel .dr-k{grid-template-columns:repeat(4,auto);justify-content:center;gap:4px 16px!important}}
/* ---- Yellow case: a bright, funky body; the bits printed straight on the case go dark so they stay readable ---- */
body.solo.cs-yellow:not([class*="th-"]) .kb-wrap{background:linear-gradient(180deg,#FFE14D 0%,#FFD60A 38%,#E8BC00 100%)!important;box-shadow:0 40px 80px -20px rgba(0,0,0,.8),0 22px 26px -14px rgba(0,0,0,.85),0 0 0 1px #b38f00,inset 0 1px 0 rgba(255,255,255,.45),inset 0 -14px 22px -12px rgba(120,90,0,.35)!important}
body.solo.cs-yellow:not([class*="th-"]) .kb-wrap::before,body.solo.cs-yellow:not([class*="th-"]) .kb-wrap::after{background:linear-gradient(180deg,#2a2a2a,#151515 55%,#0b0b0b)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),inset 0 2px 0 rgba(255,255,255,.14)}
body.solo.cs-yellow:not([class*="th-"]) .rig-panel{border-top-color:#111!important;background:none!important;border-bottom-color:rgba(0,0,0,.18)!important}
body.solo.cs-yellow:not([class*="th-"]) .kb-switches .ks-l,body.solo.cs-yellow:not([class*="th-"]) .kb-switches .sw-aa,body.solo.cs-yellow:not([class*="th-"]) .jy small{color:#111!important}
body.solo.cs-yellow:not([class*="th-"]) .rig-plate{filter:brightness(0) saturate(100%);opacity:.86}
body.solo.cs-yellow:not([class*="th-"]) .kb-wrap .lcd,body.solo.cs-yellow:not([class*="th-"]) .kb-wrap .mix-strip,body.solo.cs-yellow:not([class*="th-"]) .kb-wrap .jy-pad{box-shadow:0 10px 20px -8px rgba(80,60,0,.45),0 0 0 1px rgba(0,0,0,.35)!important}
body.solo.cs-yellow:not([class*="th-"]) .ctr{background:#141311!important}
body.solo.cs-yellow:not([class*="th-"]) .kb-switches .sus-ind,body.solo.cs-yellow:not([class*="th-"]) .kb-switches .ml-btn,body.solo.cs-yellow:not([class*="th-"]) .kb-switches #recBtn{background:#161513!important;border-color:#161513!important}
body.solo.cs-yellow:not([class*="th-"]) .kb-switches #recBtn{color:#ff8a7a!important}
body.solo.cs-yellow:not([class*="th-"]) .kb-switches .ks-l svg,body.solo.cs-yellow:not([class*="th-"]) .kb-switches .ks-l .sw-ic{color:#111!important}
/* ---- auto fit: step the panel row down a size when it would spill off (see the script) ---- */
@media (min-width:621px){
body.solo.np-fit1 .rig-panel .mix-strip{padding-left:10px!important;padding-right:10px!important}
body.solo.np-fit1 .rig-panel .mix-strip:not(.mix-synth):not(.mix-drums) .ms-k{gap:6px!important}
body.solo.np-fit1 .rig-panel .mix-strip:not(.mix-synth):not(.mix-drums) .knob,body.solo.np-fit1 .rig-panel .mix-strip:not(.mix-synth):not(.mix-drums) .knob svg{width:48px!important;height:48px!important}
body.solo.np-fit1 .rig-panel .mix-strip:not(.mix-synth):not(.mix-drums) .knob::before{inset:9px!important}
body.solo.np-fit1 .rig-panel .k-lab{font-size:8.5px!important;letter-spacing:.06em!important}
body.solo.np-fit1 .rig-panel .mix-strip:has(.led-btn[aria-pressed="false"])::after{display:none!important}
body.solo.np-fit1 .rig-panel .kb-side{width:236px!important;flex-basis:236px!important}
body.solo.np-fit2 .rig-panel .mix-strip:not(.mix-synth):not(.mix-drums) .knob,body.solo.np-fit2 .rig-panel .mix-strip:not(.mix-synth):not(.mix-drums) .knob svg{width:42px!important;height:42px!important}
body.solo.np-fit2 .rig-panel .mix-strip:not(.mix-synth):not(.mix-drums) .knob::before{inset:8px!important}
body.solo.np-fit2 .rig-panel .mix-synth .knob,body.solo.np-fit2 .rig-panel .mix-synth .knob svg{width:42px!important;height:42px!important}
body.solo.np-fit2 .rig-panel .mix-strip{padding-left:8px!important;padding-right:8px!important}
body.solo.np-fit2 .rig-panel .ms-h b{letter-spacing:.08em!important}
body.solo.np-fit2 .rig-panel .kb-side{width:212px!important;flex-basis:212px!important}
body.solo.np-fit2 .rig-panel .rs-pad .rs-l{display:none!important}
/* last step: the smallest knobs and tighter synth buttons (the row never wraps) */
html:not(.ffo-panelsize:where(:not(.fft-panelsize))) body.solo.np-fitw .rig-panel .mix-strip.ms-sized:not(.ms-col){flex:1 1 auto!important;width:auto!important}
body.solo.np-fit4 .rig-panel .knob,body.solo.np-fit4 .rig-panel .knob svg{width:38px!important;height:38px!important}
body.solo.np-fit4 .rig-panel .knob::before{inset:7px!important}
body.solo.np-fit4 .rig-panel .k-num{font-size:8.5px!important}
body.solo.np-fit4 .rig-panel .ms-k{gap:4px!important}
body.solo.np-fit4 .rig-panel .syn-sel button{padding:0 5px!important;font-size:10px!important;letter-spacing:.04em!important}
body.solo.np-fit4 .rig-panel .kb-side{width:196px!important;flex-basis:196px!important}
body.solo.np-fit4 .rig-panel .mix-drums:not(.ms-col){min-width:236px!important}
}
/* ---- big EQ graph (switch: eqpanel): a button next to Mix and a pop-out card ---- */
.eqg-btn{display:none}
html:not(.ffo-eqpanel:where(:not(.fft-eqpanel))):not(.ffo-analyser:where(:not(.fft-analyser))):not(.ffo-mix:where(:not(.fft-mix))) body.solo .eqg-btn{display:inline-grid;place-items:center;margin-left:10px}
@media (max-width:620px){html body.solo .eqg-btn{display:none!important}} /* phones: the graph is in the Mix pop-up */
.eqg-card{position:fixed;z-index:300;box-sizing:border-box;padding:14px 16px 12px;border-radius:20px;background:linear-gradient(180deg,#24211c,#181613);border:1px solid #3a3630;border-top:3px solid var(--kl,#F6A801);box-shadow:0 24px 60px rgba(0,0,0,.65);display:flex;flex-direction:column;gap:10px}
.eqg-card[hidden]{display:none}
.eqg-h{display:flex;align-items:center;gap:12px}
.eqg-h b{font:700 19px/1 'Fredoka',var(--body);color:var(--kl,#F6A801);margin-right:auto}
.eqg-pk{font:800 12px/1 'Exo 2',var(--body);letter-spacing:.06em;color:#8a8170;white-space:nowrap}.eqg-pk.warm{color:#ffb347}.eqg-pk.hot{color:#ff6a4d}
.eqg-mix{height:30px;padding:0 14px;border-radius:999px;border:1px solid #3a3630;background:#1d1b18;color:#e8e0d0;font:800 12px/1 var(--body);cursor:pointer}
.eqg-mix:hover,.eqg-mix:focus-visible{border-color:var(--kl,#F6A801);outline:none}
.eqg-x{width:30px;height:30px;flex:none;border-radius:50%;border:0;background:#2a2722;color:#e8e0d0;font-size:18px;line-height:1;cursor:pointer;display:grid;place-items:center;padding:0}
.eqg-cv{position:relative;height:clamp(180px,32vh,300px);border-radius:12px;overflow:hidden;background:#0f0e0c;box-shadow:inset 0 0 0 1px #2c2a26,inset 0 2px 8px rgba(0,0,0,.7)}
.eqg-cv canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.eqg-z{position:relative;height:14px}
.eqg-z span{position:absolute;top:0;text-align:center;font:900 10px/14px var(--body);letter-spacing:.16em;text-transform:uppercase;color:#8a8170}
/* ---- alignment pass (2026-10-14): every panel title on one line, nothing squeezed, nothing on top of anything ---- */
@media (min-width:621px){
body.solo .rig-panel .mix>.mix-strip:not(.ms-col){justify-content:flex-start!important}
body.solo .rig-panel .mix>.mix-strip:is(:has(#ledPad),.mix-synth,.mix-drums):has(.led-btn[aria-pressed="false"]):not(.ms-col){justify-content:flex-start!important;align-items:flex-start!important;text-align:left}
body.solo .rig-panel .mix-strip:is(:has(#ledPad),.mix-synth,.mix-drums):has(.led-btn[aria-pressed="false"]) .ms-h{justify-content:flex-start!important}
body.solo .rig-panel .mix-drums:not(.ms-col){min-width:300px!important}
}
@container drs (max-width:470px){html:not(.ffo-panelmin:where(:not(.fft-panelmin))) body.solo .rig-panel .mix-drums .ms-h{padding-right:64px!important}} /* the swap and minimise buttons stay inside, level with every other panel's */
@media (max-width:620px){
body.solo .rig-panel .mix-strip{grid-template-columns:max-content auto minmax(0,1fr)!important}
html:not(.ffo-panelmin:where(:not(.fft-panelmin))) body.solo .rig-panel .mix-strip.ms-mn>.ms-min{top:-11px}
html:not(.ffo-panelmin:where(:not(.fft-panelmin))) body.solo .rig-panel .mix-strip.ms-mn:not(.mix-synth):not(.mix-drums) .ms-h{padding-right:0}
}
@media (max-width:400px){
body.solo .rig-panel .mix-strip:not(.mix-synth):not(.mix-drums) .ms-k{gap:8px!important}
body.solo .rig-panel .mix-strip:not(.mix-synth):not(.mix-drums) .knob,body.solo .rig-panel .mix-strip:not(.mix-synth):not(.mix-drums) .knob svg{width:50px!important;height:50px!important}
body.solo .rig-panel .mix-strip:not(.mix-synth):not(.mix-drums) .knob::before{inset:9px!important}
body.solo .rig-panel .mix-synth .syn-sel[aria-label="Synth wave"] button{min-width:0!important;padding:0 2px!important;font-size:10px!important;letter-spacing:.02em!important}
body.solo .rig-panel .mix-drums .dr-kits button{padding:0 7px!important;font-size:10px!important;letter-spacing:.06em!important}
body.solo .rig-panel .mix-drums .ms-h>b{letter-spacing:.1em!important}
}
/* drum kits: a row when the panel has room, a dropdown when it is narrow */
.dr-kitdd{display:none!important}
@media (min-width:621px){
body.solo .rig-panel .mix-drums{container:drs/inline-size}
}
@container drs (max-width:470px){
body.solo .rig-panel .mix-drums .dr-kits{display:none!important}
body.solo .rig-panel .mix-drums .dr-kitdd{display:flex!important;flex:none;position:relative}
body.solo .rig-panel .mix-drums .dr-kitdd [data-fam="k"]{display:inline-flex;align-items:center;height:30px;padding:0 12px!important;gap:6px}
body.solo .rig-panel .mix-drums .dr-kitdd [data-fam="k"][aria-expanded="true"] svg{transform:rotate(180deg)}
body.solo .rig-panel .mix-drums .dr-kitpop{width:220px}
/* a narrow Drums panel: the kit picker shrinks (its name ellipsed) instead of sticking out past the panel's edge */
body.solo .rig-panel .mix-drums .ms-h{min-width:0;max-width:100%;flex-wrap:wrap}
body.solo .rig-panel .mix-drums .dr-kitdd{flex:0 0 auto!important;min-width:0;max-width:100%}
body.solo .rig-panel .mix-drums .dr-kitdd [data-fam="k"]{min-width:0;max-width:100%;overflow:hidden}
body.solo .rig-panel .mix-drums .dr-kitdd .dr-kitn{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.solo .rig-panel .mix-drums .dr-kitdd [data-fam="k"] svg{flex:none}
}
/* ---- Voice panel (switch: voice) ---- */
.mix-voice{display:none!important}
.mix-in2{display:none!important}
html:not(.ffo-audioin2:where(:not(.fft-audioin2))):not(.ffo-audioin:where(:not(.fft-audioin))) body.solo .rig-panel .mix-in2{display:flex!important}
@media (max-width:620px){html:not(.ffo-audioin2:where(:not(.fft-audioin2))):not(.ffo-audioin:where(:not(.fft-audioin))) body.solo .rig-panel .mix-in2{display:grid!important}}
html:not(.ffo-audioin2:where(:not(.fft-audioin2))):not(.ffo-audioin:where(:not(.fft-audioin))) body.solo .rig-panel .mix-in2.ms-col{display:flex!important}
@media (max-width:620px){html:not(.ffo-audioin2:where(:not(.fft-audioin2))):not(.ffo-audioin:where(:not(.fft-audioin))) body.solo .rig-panel .mix-in2.ms-col{display:block!important}}
@media (max-width:620px){body.solo .rig-panel .mix-in2 .ms-k{grid-column:1/-1!important;grid-row:3!important;justify-self:stretch!important;width:100%!important;justify-content:space-around!important}}
html.ffo-audioin2:where(:not(.fft-audioin2)) .in2-adv{display:none!important}
body.solo .rig-panel .mix-in2 .ep-pop{width:300px;padding-bottom:10px}
.in2-pop .in2-src{display:flex;flex-wrap:wrap;gap:5px;margin:2px 10px 8px;padding-bottom:9px;border-bottom:1px solid #2c2a26}
.mix-in2:not(.in2-voice) .in2-vk,.mix-in2:not(.in2-voice) .in2-vm{display:none!important}
.in2-pop .in2-vm{display:flex;flex-wrap:wrap;gap:5px;margin:2px 10px 8px;padding-bottom:9px;border-bottom:1px solid #2c2a26}.in2-pop .in2-vm span{flex-basis:100%;font:800 11px/1 var(--body);color:#a99f8e;margin:2px}
.in2-pop .in2-src span{flex-basis:100%;font:800 11px/1 var(--body);color:#a99f8e;margin:2px}
.in2-row{grid-column:1/-1;display:flex;align-items:center;gap:8px;margin:6px 10px 0}
.adv-row .in2-row{margin:0}
.in2-row>span{flex:0 0 58px;font:800 11.5px/1 var(--body);color:#a99f8e}
.in2-chs{display:flex;gap:4px}
body.solo .rig-panel .mix-in2 .ep-pop .in2-src button,body.solo .rig-panel .mix-in2 .ep-pop .in2-row button,body.solo .rig-panel .mix-in2 .ep-pop .in2-tone button,body.solo .rig-panel .mix-in2 .ep-pop .in2-vm button{width:auto!important;min-width:0!important;flex:none!important;display:inline-flex!important;flex-direction:row!important;align-items:center!important;justify-content:center!important;gap:0!important;height:28px!important;margin:0!important;padding:0 11px!important;border-radius:999px!important;border:1px solid #3a3630!important;background:transparent!important;color:#cfc6b4!important;font:800 12px/1 var(--body)!important;text-align:center!important;box-shadow:none!important}
body.solo .rig-panel .mix-in2 .ep-pop .in2-src button[aria-checked="true"],body.solo .rig-panel .mix-in2 .ep-pop .in2-row button[aria-checked="true"],body.solo .rig-panel .mix-in2 .ep-pop .in2-tone button[aria-checked="true"],body.solo .rig-panel .mix-in2 .ep-pop .in2-vm button[aria-checked="true"]{background:var(--kl,#F6A801)!important;border-color:var(--kl,#F6A801)!important;color:#111!important}
body.solo .rig-panel .mix-in2 .ep-pop .in2-row .in2-auto{margin-left:auto!important}
body.solo .rig-panel .mix-in2 .ep-pop .in2-row select{height:30px!important;margin:0!important}
.in2-chs button,.in2-auto{height:28px;padding:0 10px;border-radius:999px;border:1px solid #3a3630;background:transparent;color:#cfc6b4;font:800 12px/1 var(--body);cursor:pointer;white-space:nowrap}
.in2-chs button[aria-checked="true"]{background:var(--kl,#F6A801);border-color:var(--kl,#F6A801);color:#111}
.in2-auto{margin-left:auto}
.in2-auto:hover,.in2-chs button:hover{border-color:#5a554c}
.in2-row select{flex:1 1 auto;min-width:0;height:30px}
.in2-meter{position:relative;height:8px;margin:10px 10px 0;border-radius:4px;background:#11100e;overflow:hidden;opacity:.4}
.adv-row .in2-meter{margin:0}
.in2-meter.live{opacity:1}
.in2-meter .in2-bar{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,#3ecf6e 0 70%,#F6A801 70% 85%,#ff4d4d 85%);transition:width .06s}
.in2-meter .ai-zone{position:absolute;left:70%;width:10%;top:0;bottom:0;background:rgba(62,207,110,.18);box-shadow:inset 1px 0 0 rgba(62,207,110,.6),inset -1px 0 0 rgba(62,207,110,.6)}
.in2-msg{display:block;margin:8px 10px 0;font:700 11px/1.35 var(--body);color:#8a8170}
.in2-msg:empty{display:none}
html:not(.ffo-voice:where(:not(.fft-voice))):not(.ffo-audioin:where(:not(.fft-audioin))) body.solo .rig-panel .mix-voice{display:flex!important}
@media (max-width:620px){html:not(.ffo-voice:where(:not(.fft-voice))):not(.ffo-audioin:where(:not(.fft-audioin))) body.solo .rig-panel .mix-voice{display:grid!important}}
html:not(.ffo-voice:where(:not(.fft-voice))):not(.ffo-audioin:where(:not(.fft-audioin))) body.solo .rig-panel .mix-voice.ms-col{display:flex!important}
@media (max-width:620px){html:not(.ffo-voice:where(:not(.fft-voice))):not(.ffo-audioin:where(:not(.fft-audioin))) body.solo .rig-panel .mix-voice.ms-col{display:block!important}}
body.solo .rig-panel .mix-voice .ep-pop{width:290px}
body.solo .rig-panel .mix-voice .ep-pop .vx-src{display:flex;flex-wrap:wrap;gap:5px;margin:2px 10px 8px;padding-bottom:9px;border-bottom:1px solid #2c2a26}
body.solo .rig-panel .mix-voice .ep-pop .vx-src span{flex-basis:100%;font:800 11px/1 var(--body);color:#a99f8e;margin:2px 2px 2px}
body.solo .rig-panel .mix-voice .ep-pop .vx-src button,.in2-pop .in2-src button,.in2-pop .in2-vm button,.in2-pop .in2-tone button{width:auto!important;flex:none!important;min-width:0!important;display:inline-flex!important;flex-direction:row!important;align-items:center;height:28px!important;padding:0 10px!important;border-radius:999px!important;border:1px solid #3a3630!important;background:transparent!important;color:#cfc6b4!important;font:800 12px/1 var(--body)!important}
body.solo .rig-panel .mix-voice .ep-pop .vx-src button[aria-checked="true"],.in2-pop .in2-src button[aria-checked="true"],.in2-pop .in2-vm button[aria-checked="true"],.in2-pop .in2-tone button[aria-checked="true"]{background:var(--kl,#F6A801)!important;border-color:var(--kl,#F6A801)!important;color:#111!important}
body.solo .rig-panel .mix-voice.vx-inst .ep-pop [data-vxm],body.solo .rig-panel .mix-voice.vx-inst .ep-pop .vx-spk,body.solo .rig-panel .mix-voice.vx-inst .ep-pop>small{display:none!important}
.ai-gain{grid-column:1/-1;display:flex;align-items:center;gap:10px}.ai-gain input{flex:1 1 auto;min-width:0}
.ai-db{flex:none;min-width:56px;text-align:right;font:900 14px var(--body);color:var(--cream);font-variant-numeric:tabular-nums}
.ai-auto{flex:none}
.ai-meter2{grid-column:1/-1;position:relative;height:8px;border-radius:4px;background:#11100e;overflow:hidden}
.ai-meter2>i:not(.ai-zone){position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,#3ecf6e 0 70%,#F6A801 70% 85%,#ff4d4d 85%);transition:width .06s}
.ai-meter2 .ai-zone{position:absolute;left:70%;width:10%;top:0;bottom:0;background:rgba(62,207,110,.18);box-shadow:inset 1px 0 0 rgba(62,207,110,.6),inset -1px 0 0 rgba(62,207,110,.6)}
.adv-seg.ai-srcs{display:flex;flex-wrap:wrap}.adv-seg.ai-srcs button{flex:1 1 auto;white-space:nowrap;padding-left:12px;padding-right:12px}
body.solo .rig-panel .mix-voice .ep-pop .vx-parts{display:flex;align-items:center;gap:5px;margin:-2px 12px 6px;padding:0 0 8px}
body.solo .rig-panel .mix-voice .ep-pop .vx-parts[hidden]{display:none}
body.solo .rig-panel .mix-voice .ep-pop .vx-parts span{font:800 11px/1 var(--body);color:#a99f8e;margin-right:auto;white-space:nowrap}
body.solo .rig-panel .mix-voice .ep-pop .vx-parts button{width:auto!important;flex:none!important;min-width:0!important;display:inline-flex!important;flex-direction:row!important;align-items:center;justify-content:center;height:28px!important;padding:0 10px!important;border-radius:999px!important;border:1px solid #3a3630!important;background:#1d1b18!important;color:#cfc6b4!important;font:800 11.5px/1 var(--body)!important}
body.solo .rig-panel .mix-voice .ep-pop .vx-parts button[aria-checked="true"]{background:var(--kl,#F6A801)!important;border-color:var(--kl,#F6A801)!important;color:#111!important}
html.ffo-choir:where(:not(.fft-choir)) body.solo .rig-panel .mix-voice .ep-pop .vx-parts,html.ffo-choir:where(:not(.fft-choir)) body.solo .rig-panel .mix-voice .ep-pop [data-vxm="choir"],body.solo .rig-panel .mix-voice.vx-inst .ep-pop .vx-parts{display:none!important}
body.solo .rig-panel .mix-voice .ep-pop .vx-spk{display:flex;align-items:center;gap:6px;margin:6px 12px 0;padding-top:8px;border-top:1px solid #2c2a26}
body.solo .rig-panel .mix-voice .ep-pop .vx-spk span{font:800 11px/1 var(--body);color:#a99f8e;margin-right:auto;white-space:nowrap}
body.solo .rig-panel .mix-voice .ep-pop .vx-spk button{width:auto!important;flex:none!important;min-width:0!important;display:inline-flex!important;flex-direction:row!important;align-items:center;justify-content:center;height:28px!important;padding:0 10px!important;border-radius:999px!important;border:1px solid #3a3630!important;background:#1d1b18!important;color:#cfc6b4!important;font:800 11.5px/1 var(--body)!important}
body.solo .rig-panel .mix-voice .ep-pop .vx-spk button[aria-checked="true"]{background:var(--kl,#F6A801)!important;border-color:var(--kl,#F6A801)!important;color:#111!important}
@media (max-width:620px){body.solo .rig-panel .mix-voice .ms-k{grid-column:1/-1!important;grid-row:3!important;justify-self:stretch!important;width:100%!important;justify-content:space-around!important}}
body.solo .rig-panel .mix-voice .ep-pop small{display:block;padding:6px 12px 2px;font:700 11px/1.35 var(--body);color:#8a8170}
body.solo .rig-panel .mix-voice .ep-pop .vx-lat{display:block;margin:4px 12px 2px;font:800 11px/1.35 var(--body);color:#c9bfae}
.vx-lat:empty{display:none}
/* ---- Phone view button (switch: phoneview) ---- */
.pv-btn{display:none}
html:not(.ffo-phoneview:where(:not(.fft-phoneview))) body.solo .kb-switches .pv-btn{order:196;position:relative;display:inline-grid;place-items:center;width:36px;height:28px;border-radius:999px;border:1px solid #3a3630;background:#1d1b18;color:#cfc6b4;cursor:pointer;margin-left:auto}
html:not(.ffo-phoneview:where(:not(.fft-phoneview))) body.solo .kb-switches #avPv~#avBm,html:not(.ffo-phoneview:where(:not(.fft-phoneview))) body.solo .kb-switches #avPv~#avCam,html:not(.ffo-phoneview:where(:not(.fft-phoneview))) body.solo .kb-switches #avPv~#avMic,html:not(.ffo-phoneview:where(:not(.fft-phoneview))) body.solo .kb-switches #avPv~#midiBtn{margin-left:0!important}
.pv-btn.blocked{border-color:#ff6a4d;color:#ff9a7a}
/* ---- background music (switch: bgmusic) ---- */
.bm-btn-top{display:none}
html:not(.ffo-bgmusic:where(:not(.fft-bgmusic))) body.solo .kb-switches .bm-btn-top{order:197;position:relative;display:inline-grid;place-items:center;width:36px;height:28px;border-radius:999px;border:1px solid #3a3630;background:#1d1b18;color:#cfc6b4;cursor:pointer;margin-left:auto}
.cx-btn{display:none}
html:not(.ffo-connect:where(:not(.fft-connect))) body.solo .kb-switches .cx-btn{order:199;position:relative;display:inline-grid;place-items:center;width:36px;height:28px;border-radius:999px;border:1px solid #3a3630;background:#1d1b18;color:#cfc6b4;cursor:pointer;margin-left:auto}
/* Play together: a labelled pill next to Sustain, easy to find; while live it shows the code and glows mint */
html:not(.ffo-connect:where(:not(.fft-connect))) body.solo .kb-switches #avConn{order:10;display:inline-flex;align-items:center;gap:7px;width:auto;padding:0 12px 0 10px;margin-left:0;font:800 14px/1 var(--body);white-space:nowrap}
html:not(.ffo-connect:where(:not(.fft-connect))) body.solo .kb-switches #avConn:hover,html:not(.ffo-connect:where(:not(.fft-connect))) body.solo .kb-switches #avConn.open{border-color:#5a544a;color:var(--cream)}
html:not(.ffo-connect:where(:not(.fft-connect))) body.solo .kb-switches #avConn.live{border-color:#2EE6B6;color:#2EE6B6;letter-spacing:.02em}
html:not(.ffo-connect:where(:not(.fft-connect))) body.solo .kb-switches #avConn.live.peer{background:rgba(46,230,182,.12)}
html:not(.ffo-connect:where(:not(.fft-connect))) body.solo .kb-switches #avConn .av-dot{display:none}
/* icon only until a session is live (the tooltip names it); live it shows its code */
html:not(.ffo-connect:where(:not(.fft-connect))) body.solo .kb-switches #avConn:not(.live) .cx-lab{display:none}
html:not(.ffo-connect:where(:not(.fft-connect))) body.solo .kb-switches #avConn:not(.live){padding:0;width:36px;justify-content:center}
html:not(.ffo-connect:where(:not(.fft-connect))) body.solo .kb-switches #avConn.live .av-dot{display:block;position:static;width:7px;height:7px;border-radius:50%;background:#2EE6B6;box-shadow:0 0 8px #2EE6B6}
@media (min-width:621px){body.solo.tb-fit2 .kb-switches .cx-btn:not(.live) .cx-lab{display:none}body.solo.tb-fit2 .kb-switches .cx-btn:not(.live){padding:0;width:36px;justify-content:center}}
.cx-name{display:flex;align-items:center;gap:10px}.cx-name>span{font:800 12px/1 var(--body);color:#a9a091;white-space:nowrap}
.cx-name input{flex:1 1 0;min-width:0;height:34px;border-radius:9px;border:1px solid #3a3630;background:#1c1a17;color:var(--cream);font:700 14px/1 var(--body);padding:0 10px}
.cx-off{display:flex;flex-direction:column;gap:8px}
.cx-off[hidden],.cx-name[hidden]{display:none}
.cx-box{display:flex;flex-direction:column;gap:7px;padding:12px;border-radius:12px;border:1px solid #2f2b26;background:#1a1815}
.cx-box>b{font:800 14px/1 var(--body);color:var(--cream)}
.cx-or{display:flex;align-items:center;gap:10px;color:#6f6759;font:800 11px/1 var(--body);text-transform:uppercase;letter-spacing:.14em}.cx-or::before,.cx-or::after{content:"";flex:1;height:1px;background:#2f2b26}
.cx-yc{display:block;text-align:center;font:800 11px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:#8e8573}
.cx-acts{display:flex;gap:8px}.cx-acts .bg-btn{flex:1 1 0}
.cx-hint{text-align:center;font-size:12px!important;color:#7e7666!important}
#cxCode{min-width:0;width:0;font-size:18px!important}#cxJoinForm .bg-btn{flex:none;padding:0 16px}#cxJoinForm{min-width:0}
html:not(.ffo-bgmusic:where(:not(.fft-bgmusic))) body.solo .kb-switches #avBm~#avCam,html:not(.ffo-bgmusic:where(:not(.fft-bgmusic))) body.solo .kb-switches #avBm~#avMic,html:not(.ffo-bgmusic:where(:not(.fft-bgmusic))) body.solo .kb-switches #avBm~#midiBtn{margin-left:0!important}
.bm-btn-top .bm-eq{display:none;position:absolute;left:50%;bottom:3px;transform:translateX(-50%);gap:1.5px;align-items:flex-end;height:5px}
body.bm-playing .bm-btn-top .bm-eq{display:flex}body.bm-playing .bm-btn-top svg{transform:translateY(-2px)}
.bm-btn-top .bm-eq i{width:2px;background:var(--kl,#F6A801);border-radius:1px;animation:bmEq .9s ease-in-out infinite}
.bm-btn-top .bm-eq i:nth-child(2){animation-delay:-.3s}.bm-btn-top .bm-eq i:nth-child(3){animation-delay:-.6s}
@keyframes bmEq{0%,100%{height:1.5px}50%{height:5px}}
@media (prefers-reduced-motion:reduce){.bm-btn-top .bm-eq i{animation:none;height:4px}}
.bm-card .av-h{grid-template-columns:1fr auto}
.bm-card .av-body{gap:10px}
.bm-src{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px}
.bm-src input{min-width:0;height:38px;padding:0 14px;border-radius:999px;border:1px solid #3a3630;background:#141310;color:var(--cream);font:700 13.5px/1 var(--body);outline:none}
.bm-src input:focus{border-color:var(--kl,#F6A801)}
.bm-go,.bm-file,.bm-stop{height:38px;padding:0 16px;border-radius:999px;border:1px solid #3a3630;background:#1d1b18;color:#e8e0d0;font:800 12.5px/1 var(--body);cursor:pointer;white-space:nowrap}
.bm-go{background:var(--kl,#F6A801);border-color:var(--kl,#F6A801);color:#111}
.bm-msg,.bm-note{margin:0;font:700 12.5px/1.4 var(--body);color:#8a8170}.bm-note:empty{display:none}
.bm-stage{display:grid;grid-template-columns:240px minmax(0,1fr);gap:14px;align-items:start;padding:12px;border-radius:14px;background:#171613;border:1px solid #2e2b26}
.bm-stage[hidden]{display:none}
.bm-media{border-radius:10px;overflow:hidden;background:#0d0c0a;aspect-ratio:16/9}
.bm-media iframe,.bm-media>#bmYt{display:block;width:100%;height:100%;border:0}
.bm-au .bm-media{aspect-ratio:auto;align-self:stretch;min-height:96px}
@media (max-width:620px){.bm-au .bm-media{min-height:0;height:72px}}
.bm-sp .bm-stage{grid-template-columns:1fr}.bm-sp .bm-media{aspect-ratio:auto;height:152px;border-radius:12px}
.bm-sp .bm-pp,.bm-sp .bm-sm,.bm-sp .bm-vol,.bm-sp #bmDuck,.bm-sp #bmLoop{display:none}
.bm-wave{display:flex;align-items:center;justify-content:center;gap:3px;height:100%;padding:0 14px}
.bm-wave i{flex:1 1 0;max-width:5px;height:22%;border-radius:2px;background:#4a3a14}
body.bm-playing .bm-wave i{background:var(--kl,#F6A801);animation:bmEq2 1.1s ease-in-out infinite}
.bm-wave i:nth-child(3n){animation-delay:-.4s}.bm-wave i:nth-child(3n+1){animation-delay:-.75s}.bm-wave i:nth-child(4n){animation-delay:-.2s}
@keyframes bmEq2{0%,100%{height:18%}50%{height:78%}}
.bm-ctl{display:grid;gap:10px;min-width:0}
.bm-t{font:800 14px/1.25 var(--body);color:var(--cream);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bm-btns{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.bm-pp{width:40px;height:40px;border-radius:50%;border:0;background:var(--kl,#F6A801);color:#111;display:grid;place-items:center;cursor:pointer}
.bm-pp .bm-i-pause,.bm-pp.on .bm-i-play{display:none}.bm-pp.on .bm-i-pause{display:inline}
.bm-sm{width:34px;height:34px;border-radius:50%;border:1px solid #3a3630;background:#1d1b18;color:#e8e0d0;display:grid;place-items:center;cursor:pointer}
.bm-tg{height:30px;padding:0 12px;border-radius:999px;border:1px solid #34302a;background:#1d1b18;color:#bfb6a4;font:800 12px/1 var(--body);cursor:pointer}
.bm-tg[aria-checked="true"]{background:var(--yellow);border-color:var(--yellow);color:#111}
.bm-vol{display:grid;grid-template-columns:auto minmax(0,1fr) 40px;align-items:center;gap:10px;font:800 12px/1 var(--body);color:#bfb6a4}
.bm-vol input{accent-color:var(--kl,#F6A801);width:100%}.bm-vol b{text-align:right;color:var(--cream)}
.bm-stop{justify-self:start;height:30px;padding:0 12px;font-size:12px;color:#bfb6a4}
@media (max-width:620px){.bm-stage{grid-template-columns:1fr}.bm-src{grid-template-columns:minmax(0,1fr) auto}.bm-file{grid-column:1/-1}}
/* ---- resize each panel (switch: panelsize) ---- */
.ms-rs{display:none}
@media (min-width:621px){
html:not(.ffo-panelsize:where(:not(.fft-panelsize))) body.solo .rig-panel .mix-strip{position:relative}
html:not(.ffo-panelsize:where(:not(.fft-panelsize))) body.solo .rig-panel .mix-strip.ms-sized:not(.ms-col){flex:0 0 var(--pw)!important;width:var(--pw)!important;max-width:none!important;min-width:0!important}
html:not(.ffo-panelsize:where(:not(.fft-panelsize))) body.solo .rig-panel .mix-strip:not(.ms-col)>.ms-rs{display:block;position:absolute;top:10px;bottom:10px;right:-8px;width:12px;z-index:5;cursor:ew-resize;touch-action:none;border-radius:6px}
html:not(.ffo-panelsize:where(:not(.fft-panelsize))) body.solo .rig-panel .mix-strip>.ms-rs::after{content:"";position:absolute;left:50%;top:50%;width:4px;height:34px;transform:translate(-50%,-50%);border-radius:2px;background:#4a443b;opacity:.45;transition:opacity .15s,background .15s,height .15s}
html:not(.ffo-panelsize:where(:not(.fft-panelsize))) body.solo .rig-panel .mix-strip:hover>.ms-rs::after{opacity:.9}
html:not(.ffo-panelsize:where(:not(.fft-panelsize))) body.solo .rig-panel .mix-strip>.ms-rs:hover::after,html:not(.ffo-panelsize:where(:not(.fft-panelsize))) body.solo .rig-panel .mix-strip>.ms-rs:focus-visible::after,html:not(.ffo-panelsize:where(:not(.fft-panelsize))) body.solo .rig-panel .mix-strip.ms-drag>.ms-rs::after{opacity:1;background:var(--kl,#F6A801);height:48px}
html:not(.ffo-panelsize:where(:not(.fft-panelsize))) body.solo .rig-panel .mix-strip>.ms-rs:focus-visible{outline:none}
html:not(.ffo-panelsize:where(:not(.fft-panelsize))) body.solo .rig-panel .mix-strip.ms-sized:not(.mix-drums):not(.ms-col) .ms-k{justify-content:flex-start;align-self:stretch;width:auto!important}
html:not(.ffo-panelsize:where(:not(.fft-panelsize))) body.solo .rig-panel .mix-strip.ms-drag{transition:none!important}
html:not(.ffo-panelsize:where(:not(.fft-panelsize))) body.solo .rig-panel .mix-strip.ms-gone{opacity:.45;transition:opacity .12s}
body.ms-resizing,body.ms-resizing *{cursor:ew-resize!important;user-select:none!important}
}
/* ---- drum pads from the computer keys (switch: drumkeys) ---- */
.dr-keys{display:none}
html:not(.ffo-drumkeys:where(:not(.fft-drumkeys))) body.solo .rig-panel .dr-keys{display:inline-flex;align-items:center;gap:6px;flex:none;height:30px;padding:0 10px;border-radius:999px;border:1px solid #3a3630;background:#15140f;color:#c9bfae;font:900 10px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
html:not(.ffo-drumkeys:where(:not(.fft-drumkeys))) body.solo .rig-panel .dr-keys:hover,html:not(.ffo-drumkeys:where(:not(.fft-drumkeys))) body.solo .rig-panel .dr-keys:focus-visible{border-color:#6b5320;color:var(--cream);outline:none}
html:not(.ffo-drumkeys:where(:not(.fft-drumkeys))) body.solo .rig-panel .dr-keys[aria-pressed="true"]{border-color:var(--kl,#F6A801);color:var(--kl,#F6A801);box-shadow:0 0 0 1px var(--kl,#F6A801) inset}
.dpad .dk{display:none}
body.solo.dk-on .dpad .dk{display:block;position:absolute;z-index:1;top:6px;right:6px;min-width:15px;height:15px;padding:0 3px;box-sizing:border-box;border-radius:4px;background:rgba(246,168,1,.14);border:1px solid rgba(246,168,1,.4);color:var(--kl,#F6A801);font:800 9.5px/13px 'Exo 2',var(--body);text-align:center;pointer-events:none}
body.solo.dk-on .dpad.hit .dk{color:#1a1408;border-color:rgba(0,0,0,.3)}
@container drs (max-width:470px){.mix-drums .dr-keys span{display:none}.mix-drums .dr-keys{padding:0 8px!important}body.solo.dk-on .mix-drums .dpad .dk{top:3px;right:3px;min-width:12px;height:12px;font-size:8px;line-height:10px}body.solo.dk-on .mix-drums .dpad span{top:auto!important;bottom:3px!important;transform:none!important;font-size:8px!important}}
@media (max-width:620px){html:not(.ffo-drumkeys:where(:not(.fft-drumkeys))) body.solo .rig-panel .dr-keys{display:none}}
/* ---- minimise any panel to a slim rail (switch: panelmin) ---- */
.ms-min,.ms-rail{display:none}
html:not(.ffo-panelmin:where(:not(.fft-panelmin))) body.solo .rig-panel .ms-mn{position:relative}
html:not(.ffo-panelmin:where(:not(.fft-panelmin))) body.solo .rig-panel .ms-min{display:grid;place-items:center;position:absolute;top:7px;right:7px;z-index:4;width:22px;height:22px;padding:0;border-radius:7px;border:1px solid #3a3630;background:#15140f;color:#8d8371;cursor:pointer;opacity:.75;transition:opacity .15s,color .15s,border-color .15s}
html:not(.ffo-panelmin:where(:not(.fft-panelmin))) body.solo .rig-panel .ms-mn:hover>.ms-min,html:not(.ffo-panelmin:where(:not(.fft-panelmin))) body.solo .rig-panel .ms-min:focus-visible{opacity:1}
html:not(.ffo-panelmin:where(:not(.fft-panelmin))) body.solo .rig-panel .ms-min:hover,html:not(.ffo-panelmin:where(:not(.fft-panelmin))) body.solo .rig-panel .ms-min:focus-visible{color:var(--kl,#F6A801);border-color:#6b5320;outline:none}
html:not(.ffo-panelmin:where(:not(.fft-panelmin))) body.solo .rig-panel .ms-mn .flip-tab{right:36px!important}
html:not(.ffo-panelmin:where(:not(.fft-panelmin))) body.solo .rig-panel .mix-drums .ms-h,html:not(.ffo-panelmin:where(:not(.fft-panelmin))) body.solo .rig-panel .mix-synth .ms-h{padding-right:112px;box-sizing:border-box;min-width:0}
html:not(.ffo-panelmin:where(:not(.fft-panelmin))) body.solo .rig-panel .ms-mn:not(.mix-synth):not(.mix-drums) .ms-h{padding-right:22px;box-sizing:border-box}
html:not(.ffo-panelmin:where(:not(.fft-panelmin))) body.solo .rig-panel :is(.ms-col,#_p#_m)>:not(.ms-rail){display:none!important}
html:not(.ffo-panelmin:where(:not(.fft-panelmin))) body.solo .rig-panel :is(.ms-col,#_p#_m)::after,html:not(.ffo-panelmin:where(:not(.fft-panelmin))) body.solo .rig-panel :is(.ms-col,#_p#_m)::before{display:none!important;content:none!important}
html:not(.ffo-panelmin:where(:not(.fft-panelmin))) body.solo .rig-panel .kb-side.ms-col{border:1px solid #34302a;border-radius:14px;background:linear-gradient(180deg,#26231e,#1c1a16);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 8px 18px rgba(0,0,0,.35)}
html:not(.ffo-panelmin:where(:not(.fft-panelmin))) body.solo .rig-panel :is(.ms-col,#_p#_m){padding:0!important;overflow:hidden;cursor:pointer}
html:not(.ffo-panelmin:where(:not(.fft-panelmin))) body.solo .rig-panel .ms-col>.ms-rail{display:flex;align-items:center;box-sizing:border-box;width:100%;height:100%;margin:0;border:0;background:none;color:#8d8371;cursor:pointer;font:inherit;-webkit-tap-highlight-color:transparent}
html:not(.ffo-panelmin:where(:not(.fft-panelmin))) body.solo .rig-panel .ms-rail svg{flex:none;transition:color .15s}
html:not(.ffo-panelmin:where(:not(.fft-panelmin))) body.solo .rig-panel .ms-col:hover>.ms-rail svg,html:not(.ffo-panelmin:where(:not(.fft-panelmin))) body.solo .rig-panel .ms-rail:focus-visible svg{color:var(--kl,#F6A801)}
html:not(.ffo-panelmin:where(:not(.fft-panelmin))) body.solo .rig-panel .ms-rail:focus-visible{outline:2px solid var(--kl,#F6A801);outline-offset:-3px;border-radius:12px}
html:not(.ffo-panelmin:where(:not(.fft-panelmin))) body.solo .rig-panel .msr-t{font:900 11px/1 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--kl,#F6A801);white-space:nowrap}
html:not(.ffo-panelmin:where(:not(.fft-panelmin))) body.solo .rig-panel .msr-led{flex:none;width:8px;height:8px;border-radius:50%;background:#3a3226;box-shadow:inset 0 0 0 1px rgba(0,0,0,.4)}
html:not(.ffo-panelmin:where(:not(.fft-panelmin))) body.solo .rig-panel .ms-col:has(.led-btn[aria-pressed="true"]) .msr-led,html:not(.ffo-panelmin:where(:not(.fft-panelmin))) body.solo .rig-panel .mix-drums.ms-col .msr-led{background:var(--kl,#F6A801);box-shadow:0 0 7px var(--kl,#F6A801)}
html:not(.ffo-panelmin:where(:not(.fft-panelmin))) body.solo .rig-panel .kb-side.ms-col .msr-led{visibility:hidden}
.msr-pow{display:none}
html:not(.ffo-panelmin:where(:not(.fft-panelmin))) body.solo .rig-panel :is(.ms-col,#_p#_m)>.msr-pow{display:grid!important;place-items:center;position:absolute;left:50%;bottom:12px;transform:translateX(-50%);z-index:3;width:28px;height:28px;padding:0;border-radius:50%;border:1px solid #3a3630;
background:radial-gradient(circle at 50% 35%,#2e2b27,#171513);color:#6f685c;cursor:pointer;box-shadow:0 2px 4px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.06);transition:color .15s,box-shadow .15s,border-color .15s}
html:not(.ffo-panelmin:where(:not(.fft-panelmin))) body.solo .rig-panel :is(.ms-col,#_p#_m)>.msr-pow:hover{border-color:var(--kl,#F6A801);color:#cfc5b2}
html:not(.ffo-panelmin:where(:not(.fft-panelmin))) body.solo .rig-panel :is(.ms-col,#_p#_m)>.msr-pow[aria-pressed="true"]{color:#111;background:radial-gradient(circle at 50% 35%,#ffd36b,var(--kl,#F6A801));border-color:var(--kl,#F6A801);box-shadow:0 0 10px color-mix(in srgb,var(--kl,#F6A801) 70%,transparent)}
html:not(.ffo-panelmin:where(:not(.fft-panelmin))) body.solo .rig-panel :is(.ms-col,#_p#_m)>.msr-pow:focus-visible{outline:2px solid var(--kl,#F6A801);outline-offset:2px}
html:not(.ffo-panelmin:where(:not(.fft-panelmin))) body.solo .rig-panel .ms-col:has(>.msr-pow){position:relative}
html:not(.ffo-panelmin:where(:not(.fft-panelmin))) body.solo .rig-panel .ms-col:has(>.msr-pow)>.ms-rail{padding-bottom:50px!important}
html:not(.ffo-panelmin:where(:not(.fft-panelmin))) body.solo .rig-panel .ms-col:has(>.msr-pow) .msr-led{display:none!important}
html:not(.ffo-panelmin:where(:not(.fft-panelmin))) body.solo .rig-panel :is(.kb-side.ms-col,#_p#_m){display:block!important;grid-template-columns:none!important}
body.solo .rig-panel .mix-drums:not(.ms-col)>.lvl{display:none!important}
html:not(.ffo-panelmin:where(:not(.fft-panelmin))) body.solo .rig-panel .ms-rail .lvl{position:static!important;display:flex!important;flex:1 1 auto;order:3;gap:1px!important;pointer-events:none;margin:0!important;left:auto;right:auto;bottom:auto}
/* on a rail the meter is a column of round lights rising from near the bottom (every other step, 10 lights) */
html:not(.ffo-panelmin:where(:not(.fft-panelmin))) body.solo .rig-panel .ms-rail .lvl i{flex:none!important;width:6px!important;height:6px!important;border-radius:50%!important;min-width:0;min-height:0}
html:not(.ffo-panelmin:where(:not(.fft-panelmin))) body.solo .rig-panel .ms-rail .lvl i:nth-child(even){display:none!important}
html:not(.ffo-panelmin:where(:not(.fft-panelmin))) body.solo .rig-panel .ms-rail .msr-t{order:2}html:not(.ffo-panelmin:where(:not(.fft-panelmin))) body.solo .rig-panel .ms-rail svg{order:0}html:not(.ffo-panelmin:where(:not(.fft-panelmin))) body.solo .rig-panel .ms-rail .msr-led{order:1}
html:not(.ffo-panelmin:where(:not(.fft-panelmin))) body.solo .rig-panel .kb-side.ms-mn .lcd-top{padding-right:0;box-sizing:border-box} /* SUS sits flush right, in line with the address below */
@media (max-width:1240px){html:not(.ffo-panelmin:where(:not(.fft-panelmin))) body.solo .rig-panel .kb-side.ms-mn .lcd-top{padding-right:26px}} /* where the fold button shares the top line */
@media (min-width:621px){
html:not(.ffo-panelmin:where(:not(.fft-panelmin))) body.solo .rig-panel .ms-col{flex:0 0 44px!important;width:44px!important;min-width:44px!important;max-width:44px!important;margin-right:0!important;align-self:stretch}
html:not(.ffo-panelmin:where(:not(.fft-panelmin))) body.solo .rig-panel .ms-col>.ms-rail{flex-direction:column;justify-content:flex-start;gap:10px;padding:12px 0}
html:not(.ffo-panelmin:where(:not(.fft-panelmin))) body.solo .rig-panel .msr-t{writing-mode:vertical-rl;transform:rotate(180deg)}
html:not(.ffo-panelmin:where(:not(.fft-panelmin))) body.solo .rig-panel .ms-rail .lvl{flex:1 1 0!important;min-height:0!important;container-type:size;flex-direction:column-reverse!important;justify-content:flex-start!important;align-items:center!important;width:100%!important;height:auto!important;margin-top:4px!important;padding-bottom:6px!important;gap:5px!important;overflow:hidden}
/* the lights fit whatever room the rail has: 10, then smaller, then 5 */
@container (max-height:112px){ html:not(.ffo-panelmin:where(:not(.fft-panelmin))) body.solo .rig-panel .ms-rail .lvl i{width:5px!important;height:5px!important} }
@container (max-height:86px){ html:not(.ffo-panelmin:where(:not(.fft-panelmin))) body.solo .rig-panel .ms-rail .lvl i:nth-child(4n+1){display:none!important} }
html:not(.ffo-panelmin:where(:not(.fft-panelmin))) body.solo .rig-panel .ms-col .msr-led{display:none!important}
html:not(.ffo-panelmin:where(:not(.fft-panelmin))) body.solo .rig-panel .ms-col:has(.led-btn[aria-pressed="false"]) .msr-t{color:#6f675a!important}
html:not(.ffo-panelmin:where(:not(.fft-panelmin))) body.solo .rig-panel .mix-drums{min-height:190px;container:drs/inline-size}
html:not(.ffo-panelmin:where(:not(.fft-panelmin))) body.solo .rig-panel .mix-drums{display:flex!important;flex-direction:column!important;align-items:stretch!important}
html:not(.ffo-panelmin:where(:not(.fft-panelmin))) body.solo .rig-panel .mix-drums .dr-body{flex:1 1 auto;align-items:stretch}
html:not(.ffo-panelmin:where(:not(.fft-panelmin))) body.solo .rig-panel .mix-drums .dr-pads{grid-auto-rows:minmax(54px,1fr);container-type:inline-size}
html:not(.ffo-panelmin:where(:not(.fft-panelmin))) body.solo .rig-panel .mix-drums .dpad{height:auto;min-height:54px}
html:not(.ffo-panelmin:where(:not(.fft-panelmin))) body.solo .rig-panel .mix-drums .dr-k{align-self:center}
}
@container drs (max-width:470px){.mix-drums .ms-h>b svg{display:none!important}} /* narrow: the name stays, the icon goes */
@container drs (max-width:400px){.mix-drums .dr-pads{grid-template-columns:repeat(4,minmax(0,1fr))!important;grid-auto-rows:minmax(0,1fr)!important;gap:5px!important}.mix-drums .dr-pads .dpad:nth-child(-n+4){grid-row:4}.mix-drums .dr-pads .dpad:nth-child(n+5):nth-child(-n+8){grid-row:3}.mix-drums .dr-pads .dpad:nth-child(n+9):nth-child(-n+12){grid-row:2}.mix-drums .dr-pads .dpad:nth-child(n+13){grid-row:1}.mix-drums .dpad{min-height:0!important;border-radius:7px}.mix-drums .dpad i{display:none}.mix-drums .dpad span{top:50%;bottom:auto!important;left:1px!important;right:1px!important;transform:translateY(-50%);text-align:center;font-size:8.5px!important;letter-spacing:0!important;text-overflow:clip}}
/* a tight row (all five sounds showing on a laptop screen): the smallest pads still fit "Conga" and "Tom 2" in full */
@container drs (max-width:260px){.mix-drums .dpad span{font-size:7.5px!important;letter-spacing:-.02em!important;left:1px!important;right:1px!important}}
@container (min-width:560px){.dpad span{font-size:11px!important;bottom:8px}.dpad i{font-size:11.5px;left:8px;top:8px}}
@container (min-width:760px){.dpad span{font-size:12.5px!important;bottom:10px}.dpad i{font-size:12.5px}}
@media (max-width:620px){
html:not(.ffo-panelmin:where(:not(.fft-panelmin))) body.solo .rig-panel .ms-col{flex:1 1 100%!important;width:100%!important;min-height:0!important;height:auto!important}
html:not(.ffo-panelmin:where(:not(.fft-panelmin))) body.solo .rig-panel :is(.ms-col,#_p#_m){display:block!important}
html:not(.ffo-panelmin:where(:not(.fft-panelmin))) body.solo .rig-panel .ms-col>.ms-rail{flex-direction:row;justify-content:flex-start;gap:12px;padding:12px 14px}
html:not(.ffo-panelmin:where(:not(.fft-panelmin))) body.solo .rig-panel .ms-col .msr-led{order:4!important}
html:not(.ffo-panelmin:where(:not(.fft-panelmin))) body.solo .rig-panel .ms-rail .lvl{flex-direction:row!important;align-items:center!important;height:8px!important;width:auto!important;min-width:40px;flex:1 1 auto!important;max-width:none!important;margin:0 4px!important;gap:6px!important;overflow:hidden}
html:not(.ffo-panelmin:where(:not(.fft-panelmin))) body.solo .rig-panel .ms-col .ms-rail:not(:has(.lvl)) .msr-led{margin-left:auto}
html:not(.ffo-panelmin:where(:not(.fft-panelmin))) body.solo .rig-panel .ms-rail svg{transform:rotate(90deg)}
html:not(.ffo-panelmin:where(:not(.fft-panelmin))) body.solo .rig-panel :is(.ms-col,#_p#_m)>.msr-pow{left:auto!important;right:12px;bottom:auto!important;top:50%;transform:translateY(-50%)!important}
html:not(.ffo-panelmin:where(:not(.fft-panelmin))) body.solo .rig-panel .ms-col:has(>.msr-pow)>.ms-rail{padding-bottom:12px!important;padding-right:52px!important}
html:not(.ffo-panelmin:where(:not(.fft-panelmin))) body.solo .rig-panel .mix-synth>.ms-min,html:not(.ffo-panelmin:where(:not(.fft-panelmin))) body.solo .rig-panel .mix-drums>.ms-min{top:-11px}
html:not(.ffo-panelmin:where(:not(.fft-panelmin))) body.solo .rig-panel .ms-mn .flip-tab{top:-10px!important}
html:not(.ffo-panelmin:where(:not(.fft-panelmin))) body.solo .rig-panel .mix-drums .ms-h,html:not(.ffo-panelmin:where(:not(.fft-panelmin))) body.solo .rig-panel .mix-synth .ms-h{padding-right:0}
}
/* ---- camera and mic buttons + their settings cards (switch: avbuttons) ---- */
.av-btn{display:none}
html:not(.ffo-avbuttons:where(:not(.fft-avbuttons))) body.solo .kb-switches .av-btn{order:198;position:relative;display:inline-grid;place-items:center;width:36px;height:28px;border-radius:999px;border:1px solid #3a3630;background:#1d1b18;color:#cfc6b4;cursor:pointer}
html:not(.ffo-avbuttons:where(:not(.fft-avbuttons))) body.solo .kb-switches #avCam{margin-left:auto}
html:not(.ffo-avbuttons:where(:not(.fft-avbuttons))) body.solo .kb-switches #midiBtn{margin-left:0}
html.ffo-video:where(:not(.fft-video)) .av-btn#avCam,html.ffo-audioin:where(:not(.fft-audioin)) .av-btn#avMic{display:none!important}
html.ffo-video:where(:not(.fft-video)):not(.ffo-avbuttons:where(:not(.fft-avbuttons))) body.solo .kb-switches #avMic{margin-left:auto}
.av-btn:hover,.av-btn.open{border-color:var(--kl,#F6A801);color:var(--cream)}
.av-btn .av-dot{position:absolute;top:3px;right:6px;width:6px;height:6px;border-radius:50%;background:transparent}
.av-btn.live{color:var(--kl,#F6A801)}.av-btn.live .av-dot{background:#3ddc84;box-shadow:0 0 6px rgba(61,220,132,.8)}
.rs-card{position:fixed;z-index:9000;box-sizing:border-box;padding:16px;border-radius:16px;background:linear-gradient(180deg,#24211c,#181613);border:1px solid #3a3630;border-top:3px solid var(--kl,#F6A801);box-shadow:0 18px 40px rgba(0,0,0,.6);color:#FBF6EC;font:600 13px/1.45 Nunito,system-ui,sans-serif;display:flex;flex-direction:column;gap:8px}
.rs-card[hidden]{display:none!important}
.rs-card>b{font:800 15px/1.2 Nunito,sans-serif}
.rs-card p{margin:0;color:#cfc6b4}
.rs-card .rs-row{display:flex;justify-content:flex-end;gap:8px;margin-top:4px}
.rs-card button{height:36px;padding:0 14px;border-radius:999px;font:800 13px/1 Nunito,sans-serif;cursor:pointer}
.rs-card .rs-no{border:1px solid #3a3630;background:transparent;color:#cfc6b4}
.rs-card .rs-yes{border:0;background:var(--kl,#F6A801);color:#111}
.rs-card button:focus-visible{outline:2px solid var(--kl,#F6A801);outline-offset:2px}
.rs-toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:9001;padding:10px 18px;border-radius:999px;background:#1d1b18;border:1px solid #F6A801;color:#FBF6EC;font:800 13px/1 Nunito,sans-serif;box-shadow:0 10px 24px rgba(0,0,0,.5);transition:opacity .3s}
.rs-toast[hidden]{display:none}.rs-toast.out{opacity:0}
html.ffo-resetall:where(:not(.fft-resetall)) .rs-btn{display:none!important}
body.solo .kb-switches .av-btn.rs-btn{order:199!important;margin-left:0!important}
body.solo .kb-switches .av-btn.ud-btn:disabled{opacity:.4;cursor:default}
.av-card{position:fixed;z-index:305;max-height:min(78vh,720px);display:flex;flex-direction:column;box-sizing:border-box;padding:14px 14px 10px;border-radius:18px;background:linear-gradient(180deg,#24211c,#181613);border:1px solid #3a3630;border-top:3px solid var(--kl,#F6A801);box-shadow:0 24px 60px rgba(0,0,0,.6);color:var(--cream);font-family:var(--body)}
/* Connect card (switch: connect) */
.cx-card .av-body{display:flex;flex-direction:column;gap:10px}
.cx-card p{margin:0;color:#a9a091;font-size:13px;line-height:1.4}
.cx-seg{display:flex;gap:6px}.cx-seg button{flex:1 1 0;height:30px;border-radius:999px;border:1px solid #34302a;background:#1d1b18;color:#bfb6a4;font:800 12.5px/1 var(--body);cursor:pointer}
.cx-seg button[aria-selected="true"]{background:var(--yellow);border-color:var(--yellow);color:#111}
.cx-pane{display:flex;flex-direction:column;gap:8px}
#cxJoinForm{display:flex;gap:8px}
#cxCode{flex:1 1 0;height:38px;border-radius:10px;border:1px solid #3a3630;background:#1c1a17;color:var(--cream);font:900 20px/1 var(--body);letter-spacing:.1em;text-align:center;padding:0 10px}
.cx-code-big{font:900 40px/1 var(--display);letter-spacing:.08em;text-align:center;color:var(--yellow);margin:4px 0}
.cx-status{text-align:center}
.cx-via{margin:4px 0 0;text-align:center;font:700 11.5px/1.4 var(--body);color:#8a8170}.cx-via b{color:#F6A801}
.cx-msg{min-height:16px;text-align:center;color:#c9bfae}
.av-card[hidden]{display:none}
.av-card::before{content:"";position:absolute;top:-9px;left:var(--arrow,50%);width:14px;height:14px;transform:translateX(-50%) rotate(45deg);background:var(--kl,#F6A801);border-radius:2px;z-index:-1}
.av-card.av-sheet{left:8px!important;right:8px;bottom:calc(8px + env(safe-area-inset-bottom,0px));top:auto!important;width:auto!important}
.av-card.av-sheet::before{display:none}
.av-h{display:grid;grid-template-columns:1fr auto auto;align-items:center;column-gap:8px;margin-bottom:10px}
.av-h b{font:700 19px/1.1 'Fredoka',var(--body);color:var(--kl,#F6A801)}
.av-h span{grid-column:1;font:600 12.5px/1.3 var(--body);color:#8a8170}
.av-more{grid-row:1/3;grid-column:2;height:30px;padding:0 12px;border-radius:999px;border:1px solid #3a3630;background:#1d1b18;color:#cfc6b4;font:800 12px/1 var(--body);cursor:pointer}
.av-x{grid-row:1/3;grid-column:3;width:30px;height:30px;border-radius:50%;border:0;background:#2a2722;color:#e8e0d0;font-size:18px;cursor:pointer}
.av-body{flex:1;min-height:0;overflow:auto;display:grid;gap:8px;padding-right:2px;scrollbar-width:thin;scrollbar-color:#4a443b transparent}
.av-body .adv-pane{display:grid!important;grid-template-columns:1fr!important;gap:8px}
.av-body .adv-pane>.adv-pg{display:none!important}
.av-card.av-cam .adv-pane .ai-wrap>*{display:none!important}
.av-body .adv-row{padding:10px 12px}
.av-body .adv-l h3{font-size:15px}.av-body .adv-l p{font-size:12.5px}
.av-body .adv-l p:not(#aiTxt):not(#vocTxt){display:none}
.av-body .adv-l p#vdTxt{display:none}
.av-body .adv-row{padding:9px 12px;gap:6px 10px}
.av-body .adv-pane,.av-body .ai-wrap{gap:6px}
.av-card.av-cam .vd-cred{display:none}
@media (min-width:621px){
.av-card{max-height:min(84vh,760px)}
.av-body .adv-pane{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.av-card.av-mic .av-body{grid-template-columns:repeat(2,minmax(0,1fr))}
.av-body .adv-row{grid-column:auto}
.av-body .adv-row.adv-wide,.av-body .ai-row,.av-body .ai-rig,.av-body .ai-voc,.av-body .ai-opt:has([data-aich]){grid-column:1/-1}
.av-body .adv-row:has([data-vbg]),.av-body .adv-row:has([data-vbc]),.av-body .adv-row:has([data-vd]){grid-column:1/-1}
.av-body .adv-row:has([data-vmi]){order:1}.av-body .adv-row:has([data-vbc]){order:2}
}
/* ---- joystick ---- */
.jy{display:none}
body.solo.jy-on .rig-panel .jy{order:0;flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;margin-right:14px;align-self:center}
.jy-pad{position:relative;width:84px;height:84px;border-radius:16px;background:radial-gradient(circle at 50% 46%,#2b2823,#121110 72%);box-shadow:inset 0 2px 9px rgba(0,0,0,.85),inset 0 0 0 1px #3a3630,0 1px 0 rgba(255,255,255,.05);touch-action:none;cursor:grab;outline:none;-webkit-tap-highlight-color:transparent}
.jy.held .jy-pad{cursor:grabbing}
.jy-pad:focus-visible{box-shadow:inset 0 2px 9px rgba(0,0,0,.85),0 0 0 2px var(--yellow)}
.jy-h,.jy-v{position:absolute;background:rgba(246,168,1,.16);pointer-events:none}
.jy-h{left:14%;right:14%;top:50%;height:1px}.jy-v{top:14%;bottom:14%;left:50%;width:1px}
.jy-l{position:absolute;font:800 7.5px/1 var(--body);letter-spacing:.14em;color:#6f685c;pointer-events:none}
.jy-up{top:6px;left:50%;transform:translateX(-50%)}.jy-dn{bottom:6px;left:50%;transform:translateX(-50%)}
.jy-lt,.jy-rt{top:50%;transform:translateY(-50%);font-size:12px;letter-spacing:0}.jy-lt{left:7px}.jy-rt{right:7px}
.jy-puck{position:absolute;left:50%;top:50%;width:32px;height:32px;margin:-16px 0 0 -16px;border-radius:50%;pointer-events:none;
transform:translate(calc(var(--jx,0)*24px),calc(var(--jy,0)*24px));background:radial-gradient(circle at 38% 32%,#6b645a,#26231f 58%,#151412);
box-shadow:0 6px 10px rgba(0,0,0,.65),0 0 0 2px #F6A801,0 0 10px rgba(246,168,1,.35);transition:box-shadow .15s}
.jy.live .jy-puck{box-shadow:0 6px 10px rgba(0,0,0,.65),0 0 0 2px #FFC233,0 0 18px rgba(246,168,1,.75)}
.jy.spring .jy-puck{transition:transform .26s cubic-bezier(.3,1.6,.5,1),box-shadow .15s}
.jy small{font:900 9px/1 var(--body);letter-spacing:.2em;color:#8a8170;white-space:nowrap}
.jy-tip{display:none}
html.ffo-joystick:where(:not(.fft-joystick)) .jy,html.ffo-joystick:where(:not(.fft-joystick)) .adv-jy{display:none!important}
@media (min-width:621px) and (max-width:1240px){
body.solo.jy-on .rig-panel .kb-side{width:calc(100% - 112px)!important;flex-basis:calc(100% - 112px)!important;align-self:stretch!important}
body.solo.jy-on .rig-panel .kb-side>.lcd{align-self:stretch!important;height:auto!important;max-height:none!important}
/* a shorter chord screen here: the column packs a little tighter so it is no taller than the screen */
body.solo.jy-on .rig-panel .jy{gap:4px!important;margin-bottom:14px!important} /* same gap under it as the chord screen has */
html:not(.ffo-ch1twin:where(:not(.fft-ch1twin))) body.solo.jy-on .rig-panel .jy>.ch1-twin{width:40px!important;height:40px!important}
}
@media (max-width:620px){
body.solo.jy-on .rig-panel .jy{order:1;flex:0 0 100%;flex-direction:row;justify-content:flex-start;gap:14px;margin:0 0 12px;padding:12px;box-sizing:border-box;border:1px solid #34302a;border-radius:14px;background:linear-gradient(180deg,#26231e,#1c1a16);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 8px 18px rgba(0,0,0,.35)}
body.solo.jy-on .rig-panel .jy small{order:-1;writing-mode:horizontal-tb;display:none}
body.solo.jy-on .rig-panel .jy-tip{display:block;margin:0;font:700 12.5px/1.45 var(--body);color:#a99f8c}
body.solo.jy-on .rig-panel .jy-tip::before{content:"PITCH \00B7 MOD";display:block;margin-bottom:5px;font:900 10px/1 var(--body);letter-spacing:.2em;color:var(--yellow)}
.jy-pad{width:78px;height:78px;flex:none}
}
/* ---- drums: its own panel next to Synth, not a flip card (switch: drums) ---- */
html.ffo-drums:where(:not(.fft-drums)) .mix-drums{display:none!important}
/* switched-off panels stay hidden on every screen size (the phone layout rules used to bring some back) */
html.ffo-drums:where(:not(.fft-drums)) body.solo .rig-panel .mix>.mix-strip.mix-drums.mix-drums{display:none!important}
html.ffo-voice:where(:not(.fft-voice)) body.solo .rig-panel .mix>.mix-strip.mix-voice.mix-voice{display:none!important}
html.ffo-audioin:where(:not(.fft-audioin)) body.solo .rig-panel .mix>.mix-strip.mix-voice.mix-voice{display:none!important}
html.ffo-audioin2:where(:not(.fft-audioin2)) body.solo .rig-panel .mix>.mix-strip.mix-in2.mix-in2{display:none!important}
html.ffo-audioin:where(:not(.fft-audioin)) body.solo .rig-panel .mix>.mix-strip.mix-in2.mix-in2{display:none!important}
html.ffo-organ:where(:not(.fft-organ)) body.solo .rig-panel .mix>.mix-strip.mix-organ.mix-organ{display:none!important}
html.ffo-guitars:where(:not(.fft-guitars)) body.solo .rig-panel .mix>.mix-strip.mix-gtr.mix-gtr,html.ffo-bass:where(:not(.fft-bass)) body.solo .rig-panel .mix>.mix-strip.mix-bass.mix-bass,html.ffo-world:where(:not(.fft-world)) body.solo .rig-panel .mix>.mix-strip.mix-world.mix-world{display:none!important}
html.ffo-synth:where(:not(.fft-synth)) body.solo .rig-panel .mix>.mix-strip.mix-synth.mix-synth{display:none!important}
body.solo .rig-panel .mix-drums{flex:1 1 auto;min-width:0;background:linear-gradient(180deg,#22211f,#1a1917)!important;justify-content:flex-start!important;gap:10px!important}
body.solo .rig-panel .mix-drums .ms-h{display:flex!important;flex-wrap:nowrap;align-items:center;gap:12px;width:100%}
body.solo .rig-panel .mix-drums .dr-kits{flex:none}
.dr-body{display:flex;align-items:center;gap:14px;width:100%;min-width:0}
.dr-pads{flex:1 1 auto;min-width:0;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px;transition:opacity .2s}
.dr-pads .dpad:nth-child(-n+8){grid-row:2}.dr-pads .dpad:nth-child(n+9){grid-row:1}
.dr-pads.loading{opacity:.55}
.dpad{position:relative;height:54px;min-width:0;padding:0;border:0;border-radius:9px;overflow:hidden;cursor:pointer;touch-action:none;-webkit-tap-highlight-color:transparent;font:inherit;color:#bfb5a3;
background:linear-gradient(180deg,#35312b,#25221e);box-shadow:inset 0 1px 0 rgba(255,255,255,.09),inset 0 -2px 0 rgba(0,0,0,.45),0 2px 4px rgba(0,0,0,.55);transition:transform .08s}
.dpad::after{content:"";position:absolute;inset:0;z-index:0;border-radius:inherit;background:radial-gradient(circle at 50% 55%,rgba(255,206,90,.98),rgba(246,168,1,.62) 46%,rgba(246,168,1,.08) 80%);opacity:0;transition:opacity .38s ease-out}
.dpad.hit::after{opacity:var(--hv,1);transition:none}
.dpad.hit{transform:translateY(1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),inset 0 -1px 0 rgba(0,0,0,.45),0 1px 2px rgba(0,0,0,.55),0 0 14px rgba(246,168,1,.35)}
.dpad i,.dpad span{position:absolute;z-index:1;pointer-events:none;transition:color .38s}
.dpad i{left:6px;top:6px;font:800 10px/1 'Exo 2',var(--body);font-style:normal;color:#8d8371}
.dpad span{left:3px;right:3px;bottom:6px;font:800 9px/1.1 var(--body);letter-spacing:.02em;text-align:center;white-space:nowrap;overflow:hidden}
.dpad.hit i,.dpad.hit span{color:#1a1408;transition:none}
.dpad:focus-visible{outline:2px solid var(--yellow);outline-offset:1px}
.dr-k{flex:none;display:flex!important;flex-direction:column;align-items:center;gap:4px!important;width:auto!important}
body.solo .rig-panel .dr-k .knob,body.solo .rig-panel .dr-k .knob svg{width:42px!important;height:42px!important}
body.solo .rig-panel .dr-k .knob::before{inset:8px!important}
body.solo .rig-panel .dr-k .k-num{font-size:9px}
body.solo .rig-panel .dr-k .k-lab{font-size:8px!important;letter-spacing:.08em!important;margin-top:1px}
body.solo .rig-panel .dr-k .kn-wrap{gap:0}
@media (min-width:1241px) and (max-width:1340px){.dpad span{font-size:8px;letter-spacing:0;left:1px;right:1px}.dpad i{font-size:9px;left:5px}}
@media (max-width:620px){
.dr-body{flex-direction:column;align-items:stretch}
.dr-pads{grid-template-columns:repeat(4,minmax(0,1fr))}
.dr-pads .dpad:nth-child(-n+4){grid-row:4}.dr-pads .dpad:nth-child(n+5):nth-child(-n+8){grid-row:3}.dr-pads .dpad:nth-child(n+9):nth-child(-n+12){grid-row:2}.dr-pads .dpad:nth-child(n+13){grid-row:1}
.dpad{height:auto;aspect-ratio:1/.86}
body.solo .rig-panel .mix-drums{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:12px!important}
body.solo .rig-panel .mix-drums .ms-h{display:flex!important;flex-wrap:nowrap;justify-content:space-between}
.dr-k{flex-direction:row;justify-content:center!important;gap:36px!important;width:100%!important}
body.solo .rig-panel .dr-k .knob,body.solo .rig-panel .dr-k .knob svg{width:50px!important;height:50px!important}
.dpad span{font-size:10.5px}.dpad i{font-size:11px}
}
/* ---- ch1: the regrouped menus (switch: menus) ---- */
.rg-btn,.rg-div,.rg-rec>.rg-x{display:none}
body.rg .rg-gone{display:none!important}
body.rg .rg-ghost{position:absolute!important;opacity:0!important;pointer-events:none!important;margin:0!important;z-index:-1!important;flex:none!important;min-width:0!important;padding:0!important;overflow:hidden!important}
body.rg .kb-switches,body.rg #kbTools{position:relative}
body.rg .kb-switches .rg-btn{display:inline-flex!important;align-items:center;gap:6px;position:relative;flex:none;white-space:nowrap}
body.rg .kb-switches .rg-btn svg{flex:none}
body.rg .kb-switches .rg-btn>svg:last-of-type{opacity:.7;margin-left:-1px}
body.rg .kb-switches .rg-btn.open{border-color:var(--kl,#F6A801)}
body.rg .kb-switches .rg-btn .rg-dot{display:none}
body.rg .kb-switches #rgStudio.live .rg-dot{display:block;position:absolute;top:3px;right:7px;width:6px;height:6px;border-radius:50%;background:#3ddc84;box-shadow:0 0 6px rgba(61,220,132,.8)}
body.rg .kb-switches .rg-div{display:block;flex:none;width:1px;height:20px;background:#3a3630}
body.rg .kb-switches .rg-div[hidden]{display:none!important}
body.rg .kb-switches .rg-rec{display:inline-flex;align-items:center;flex:none}
body.rg .kb-switches .rg-rec.rg-join .rec-top{border-top-right-radius:0!important;border-bottom-right-radius:0!important}
body.rg .kb-switches .rg-rec.rg-join .mt-btn{border-top-left-radius:0!important;border-bottom-left-radius:0!important;margin-left:-1px!important;border-color:#5a2622!important}
body.rg .kb-switches #susInd{order:1!important}body.rg .kb-switches #rgKeys{order:2!important}body.rg .kb-switches .rg-div[data-o="1"]{order:3!important}
body.rg .kb-switches #lnTg{order:4!important}body.rg .kb-switches #sgTg{order:5!important}body.rg .kb-switches .rg-rec{order:6!important}body.rg .kb-switches .rg-div[data-o="2"]{order:7!important}
body.rg .kb-switches #avCam{order:8!important}body.rg .kb-switches #avMic{order:9!important}body.rg .kb-switches #rgStudio{order:10!important}
body.rg .kb-switches #avUndo,body.rg .kb-switches #avRedo{order:197!important}body.rg .kb-switches #avReset{order:198!important}body.rg .kb-switches #midiBtn{order:200!important}
body.rg .kb-switches :is(#avUndo,#avRedo,#avReset,#midiBtn){margin-left:0!important}body.rg .kb-switches .rg-push{margin-left:auto!important}
html body.solo:not(.mob) .kb-switches>:is(#avFb,#avVision,#avUndo,#avRedo,#avReset,#midiBtn,#avMe,.ml-ctl).mi-push:is(#avFb,#avVision,#avUndo,#avRedo,#avReset,#midiBtn,#avMe,.ml-ctl).mi-push{margin-left:auto!important}
@media (max-width:620px){
body.rg .kb-switches::before,body.rg .kb-switches::after{content:"";flex:0 0 100%;height:0}
body.rg .kb-switches::before{order:3!important}body.rg .kb-switches::after{order:6!important}
body.rg .kb-switches #midiBtn{order:0!important;flex:1 1 auto!important;min-width:0}
body.rg .kb-switches #avUndo,body.rg .kb-switches #avRedo{order:1!important}body.rg .kb-switches #avReset{order:2!important}
body.rg .kb-switches :is(#susInd,#rgKeys,#lnTg,#sgTg){order:4!important;flex:1 1 0!important;min-width:0;justify-content:center;padding-left:6px!important;padding-right:6px!important;margin-left:0!important}
body.rg .kb-switches .rg-rec{order:7!important;flex:1 1 auto}body.rg .kb-switches .rg-rec .rec-top{flex:1 1 auto!important;justify-content:center}
body.rg .kb-switches #avCam,body.rg .kb-switches #avMic{order:8!important}body.rg .kb-switches #rgStudio{order:9!important}
body.rg .kb-switches .rg-div{display:none!important}
body.rg .kb-switches .rg-btn>svg:last-of-type{display:none}
body.rg .kb-switches{column-gap:6px!important}
body.rg .kb-switches :is(#susInd,#rgKeys,#lnTg,#sgTg){font-size:13px!important;gap:5px!important;padding-left:4px!important;padding-right:4px!important}
body.rg .kb-switches :is(#rgKeys,#lnTg,#sgTg) svg{width:15px;height:15px}
body.rg .kb-switches .rg-rec{flex:1 1 0!important;min-width:0}body.rg .kb-switches .rg-rec .rec-top{min-width:0;padding:0 8px!important}
body.rg .kb-switches .rg-rec .mt-btn .rg-tk svg{display:none}
body.rg .kb-switches #rgStudio{padding:0 10px!important}
}
@media (min-width:621px){
body.rg:not(.tb-fit1) .kb-switches :is(#lnTg,#sgTg).tb-ic{width:auto!important;padding:0 11px!important;gap:0!important;font-size:14px!important}
body.rg:not(.tb-fit1) .kb-switches :is(#lnTg,#sgTg).tb-ic .tb-lab{display:inline}
body.rg.tb-fit1 .kb-switches #midiLabel{font-size:0!important}body.rg.tb-fit1 .kb-switches #midiLabel::after{content:'MIDI';font-size:14px}
body.rg.tb-fit3 .kb-switches .rg-btn .rg-lab{display:none}
}
body.rg .kb-switches .rg-rec .mt-btn .rg-tk{display:none}
/* no drop-down arrows on the toolbar: the tooltip says what a button does, and a click opens its menu */
@media (min-width:621px){
html body.solo .kb-switches :is(#rgKeys,#rgStudio)>svg[width="12"]{display:none!important}
html body.solo .kb-switches :is(#rgKeys,#rgStudio){gap:0!important}
html body.solo .kb-switches .rg-rec #mtBtn .rg-tk{display:none!important}
html body.solo .kb-switches .rg-rec #mtBtn>svg:first-child{display:inline-block!important}
html body.solo .kb-switches .rg-rec #mtBtn{width:auto!important;padding:0 11px 0 10px!important;display:inline-flex!important;align-items:center;justify-content:center;color:#e9b4ab}
}
body.rg:not(.tb-fit2) .kb-switches .rg-rec .mt-btn{width:auto!important;padding:0 11px 0 10px!important;display:inline-flex!important;align-items:center;gap:5px;font:800 13px/1 Nunito,sans-serif;color:#e9b4ab}
body.rg:not(.tb-fit2) .kb-switches .rg-rec .mt-btn>svg:first-child{display:none}
body.rg:not(.tb-fit2) .kb-switches .rg-rec .mt-btn .rg-tk{display:inline-flex;align-items:center;gap:4px}
@media (max-width:620px){body.rg .kb-switches .rg-rec .mt-btn{width:auto!important;padding:0 11px!important;display:inline-flex!important;align-items:center;gap:5px;font:800 13px/1 Nunito,sans-serif;color:#e9b4ab}body.rg .kb-switches .rg-rec .mt-btn>svg:first-child{display:none}body.rg .kb-switches .rg-rec .mt-btn .rg-tk{display:inline-flex}}
.rg-card{position:fixed;z-index:9000;box-sizing:border-box;padding:16px;border-radius:18px;background:linear-gradient(180deg,#24211c,#171512);border:1px solid #3a3630;border-top:3px solid var(--kl,#F6A801);box-shadow:0 24px 54px rgba(0,0,0,.65);color:#FBF6EC;font:600 13px/1.4 Nunito,system-ui,sans-serif;display:flex;flex-direction:column;gap:12px;max-height:calc(100vh - 24px);overflow:auto;animation:cwIn .22s cubic-bezier(.2,.9,.3,1)}
.rg-card[hidden]{display:none!important}
.rg-card.rg-sheet{left:8px!important;right:8px;bottom:calc(8px + env(safe-area-inset-bottom,0px));top:auto!important;width:auto!important;max-height:82vh}
.rg-h{display:flex;justify-content:space-between;align-items:center;gap:10px}.rg-h b{font:800 11px/1 Nunito,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#a99f8e}
.rg-x{flex:none;display:grid;place-items:center;width:32px;height:32px;padding:0;border-radius:50%;border:1px solid #3a3630;background:#1d1b18;color:#cfc6b4;font:400 20px/1 sans-serif;cursor:pointer}
.rg-b{display:flex;flex-direction:column;gap:12px}
.rg-sec{font:900 10.5px/1 Nunito,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#8a8273;margin-top:2px}
.rg-seg{display:flex;border-radius:999px;background:#1b1916;border:1px solid #2e2b26;padding:3px;gap:3px}
.rg-seg button{flex:1 1 0;min-width:0;height:32px;padding:0 8px;border:0;border-radius:999px;background:transparent;color:#cfc6b4;font:800 13px/1 Nunito,sans-serif;cursor:pointer;white-space:nowrap}
.rg-seg button:hover{color:#FBF6EC}
/* Scenes, empty: the message, then a quiet text link under it (a line, not a button) */
.stg-list .stg-empty.scn-empty{flex-direction:column;align-items:flex-start;gap:10px;text-align:left}
.scn-find{display:inline;margin:0;padding:0;border:0;background:none;color:var(--kl,#F6A801);font:800 13px/1.4 var(--body);text-decoration:underline;text-underline-offset:3px;cursor:pointer;text-align:left}
.scn-find:disabled{cursor:default;text-decoration:none}
.scn-find.none{color:#8e8573}
/* two-line choices (Names show as): the name, with a small example under it */
.rg-seg.rg-seg2{border-radius:14px}
.rg-seg.rg-seg2 button{height:auto;padding:8px 6px;border-radius:11px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px}
.rg-seg.rg-seg2 button b{font:800 13px/1 Nunito,sans-serif}
.rg-seg.rg-seg2 button small{font:700 11px/1 Nunito,sans-serif;opacity:.7;letter-spacing:.04em}
.rg-seg.rg-seg2 button[aria-checked="true"] small{opacity:.8}
.rg-seg button[aria-checked="true"],.rg-seg button[aria-selected="true"]{background:var(--kl,#F6A801);color:#111}
.rg-row{display:flex;justify-content:space-between;align-items:center;gap:12px}
.rg-l{display:flex;flex-direction:column;gap:2px;min-width:0}.rg-l b{font:800 13.5px/1.25 Nunito,sans-serif}.rg-l small{font:600 11.5px/1.35 Nunito,sans-serif;color:#8a8273}
.rg-c{flex:none;display:flex;gap:8px;align-items:center}
.rg-tog{flex:none;position:relative;width:40px;height:24px;padding:0;border:0;border-radius:999px;background:#3a3630;cursor:pointer}
.rg-tog::after{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:#cfc6b4;transition:left .15s}
.rg-tog[aria-checked="true"]{background:var(--kl,#F6A801)}.rg-tog[aria-checked="true"]::after{left:19px;background:#111}
.rg-pill{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 13px;border-radius:999px;border:1px solid #3a3630;background:#1d1b18;color:#FBF6EC;font:800 13px/1 Nunito,sans-serif;cursor:pointer;white-space:nowrap}
.rg-pill:hover{border-color:#5a554c}.rg-pill .rg-kbd{min-width:20px;height:20px;font-size:11px}
.rg-more{align-self:stretch;text-align:left;border:0;border-top:1px solid #2a2723;background:none;padding:10px 0 0;color:#a99f8e;font:700 12px/1.35 Nunito,sans-serif;cursor:pointer}.rg-more:hover{color:var(--kl,#F6A801)}
.rg-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.rg-tiles.rg-t2{grid-template-columns:1fr 1fr}.rg-tiles.rg-t2:has(>:nth-child(3)){grid-template-columns:repeat(3,1fr)}
.rg-tile{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0;min-height:96px;padding:12px;box-sizing:border-box;text-align:left;border-radius:14px;border:1px solid #3a3630;background:#1b1916;color:#FBF6EC;cursor:pointer;font:inherit}
.rg-tile:hover{border-color:#5a554c;background:#211f1b}
.rg-tile.on{border-color:#5a400a;background:linear-gradient(180deg,#2a1f0b,#1b1609)}
.rg-ti{display:flex;justify-content:space-between;align-items:center;align-self:stretch;height:22px;color:var(--kl,#F6A801)}.rg-ti>svg{display:block;flex:none;width:22px;height:22px} /* one icon box: every title starts on the same line */
.rg-led{width:8px;height:8px;border-radius:50%;background:#3a3630}.rg-tile.on .rg-led{background:#3ddc84;box-shadow:0 0 6px rgba(61,220,132,.8)}
.rg-tile b{font:800 13.5px/1.15 Nunito,sans-serif}.rg-tile small{font:600 11px/1.3 Nunito,sans-serif;color:#8a8273}
.rg-note{margin:0;font:600 11.5px/1.4 Nunito,sans-serif;color:#8a8273}
.rg-kbd{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:2px 6px 0;box-sizing:border-box;border-radius:6px;border:1px solid #4a443b;border-bottom-width:3px;background:#22201c;font:900 11.5px/1 Nunito,sans-serif;color:#FBF6EC}
.rg-sc{display:grid;grid-template-columns:1fr 1fr;column-gap:24px}
.rg-sc>div{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:38px;border-bottom:1px solid #2a2723;font:700 13px/1.2 Nunito,sans-serif}
.rg-sc>div>span:last-child{display:flex;gap:4px;align-items:center;flex:none}
.rg-sm{font:700 11.5px/1 Nunito,sans-serif;color:#8a8273}
.rg-new{display:inline-block;margin-right:6px;padding:3px 8px;border-radius:999px;background:#2a1d04;border:1px solid #5a400a;color:#ffc93d;font:800 10.5px/1 Nunito,sans-serif}
@media (max-width:620px){.rg-sc{grid-template-columns:1fr}.rg-tiles{grid-template-columns:1fr 1fr}.rg-tiles>.rg-tile:last-child:nth-child(odd){grid-column:1/-1}}
.av-card .rg-mseg{margin:2px 0 10px;flex:none}.av-card .rg-mseg[hidden]{display:none}
.av-card[data-mpg="0"] .ai-wrap [data-pg]:not([data-pg="0"]),.av-card[data-mpg="1"] .ai-wrap [data-pg]:not([data-pg="1"]),.av-card[data-mpg="2"] .ai-wrap [data-pg]:not([data-pg="2"]){display:none!important}
.eq-pop .rg-graphb{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;margin-top:12px}
.eq-pop .rg-graphb[hidden]{display:none}
body.rg .eq-pop{overflow-y:auto;overscroll-behavior:contain}
body.rg .eq-pop .rg-lv .adv-row>*{width:100%;box-sizing:border-box;text-align:left;justify-content:flex-start}body.rg .eq-pop .rg-lv .lv-status{justify-content:flex-start}
body.rg .eq-pop .rg-lv .adv-row{display:flex;flex-direction:column;align-items:stretch;gap:8px;margin:0 0 12px;padding:0;background:none;border:0;box-shadow:none}
body.rg .eq-pop .rg-lv .adv-l h3{margin:0;color:#FBF6EC;font:800 13.5px/1.2 Nunito,sans-serif}
body.rg .eq-pop .rg-lv .adv-l p{margin:2px 0 0;color:#a99f8e;font:600 11.5px/1.35 Nunito,sans-serif}
.ch1-who{max-height:calc(100vh - 24px);overflow:auto}
.ch1-who .mf-list{grid-template-columns:1fr;max-height:min(300px,42vh);overflow:auto;overscroll-behavior:contain}.ch1-who .mf-row{margin:0}
/* ---- ch1 on a phone (everyone): one screen, sound chips, a bottom bar, sheets that slide up ---- */
.mob-sounds,.mob-sus,.mob-dock,.mob-sheet,.mob-dim{display:none}
@keyframes mobUp{from{transform:translateY(40px);opacity:0}}
@keyframes mobFade{from{opacity:0}}
/* ---- ch1 on a phone, play first (Oct 2026): a slim chord screen, one row of four big controls (Sound, Key, Tempo, Sustain),
an octave bar, and two octaves of big keys in two rows (the higher octave on top). Tablets and computers are unchanged ---- */
@media (max-width:620px){
html body.solo.mob .kb-wrap>.mob-sounds{display:none!important}
html body.solo.mob .kb-wrap .rig-panel>.kb-side{margin-bottom:8px!important}
html body.solo.mob #lcd{height:50px!important;min-height:0!important;padding:0 14px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;box-sizing:border-box!important}
html body.solo.mob #lcd>:is(.lcd-row,.lcd-wm,.lcd-tm,.lcd-grip){display:none!important}
html body.solo.mob #lcd>.lcd-main{order:1;flex:1 1 auto;min-width:0;margin:0!important;padding:0!important;height:auto!important;display:flex!important;align-items:baseline;gap:8px;position:static!important}
html body.solo.mob #lcd #lcdName{font-size:30px!important;line-height:1!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html body.solo.mob #lcd #lcdNum{font-size:18px!important;line-height:1!important}
html body.solo.mob #lcd>.lcd-top{order:2;flex:none;position:static!important;width:auto!important;margin:0!important;display:flex!important;align-items:center;gap:8px;font-size:14px!important}
html body.solo.mob #lcd.idle>.lcd-main{display:none!important}
html body.solo.mob #lcd:not(.idle) #lcdMode{display:none!important}
html body.solo.mob #lcd #lcdName{flex:none;overflow:visible!important;text-overflow:clip!important}
html body.solo.mob #lcd>.lcd-top{min-width:0;overflow:hidden}
html body.solo.mob #lcd #lcdKey{display:none!important} /* the key is on its own button just below */
html body.solo.mob #lcd>.lcd-main{overflow:hidden}
html body.solo.mob #lcd #lcdNum{min-width:0;overflow:hidden;white-space:nowrap}
html body.solo.mob #lcd.idle>.lcd-top{flex:1 1 auto;justify-content:space-between}
/* the four big controls */
html body.solo.mob #kbTools{flex-wrap:nowrap!important;gap:6px!important}
html body.solo.mob #kbTools>.mob-snd:not(#_x){order:1!important;flex:1 1 0;min-width:64px;display:inline-flex;align-items:center;justify-content:center;gap:7px;height:44px;padding:0 10px;border-radius:12px;border:1px solid #3a3630;background:#262420;color:#FBF6EC;font:800 14px/1 Nunito,sans-serif;cursor:pointer;-webkit-tap-highlight-color:transparent}
html body.solo.mob #kbTools>.mob-snd span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html body.solo.mob #kbTools>.mob-snd i{flex:none;width:8px;height:8px;border-radius:50%;background:#3a3630}
html body.solo.mob #kbTools>.mob-snd.on{border-color:var(--kl,#F6A801)}
html body.solo.mob #kbTools>.mob-snd.on i{background:var(--kl,#F6A801);box-shadow:0 0 8px var(--kl,#F6A801)}
html body.solo.mob #kbTools>.mob-snd svg{flex:none;color:var(--kl,#F6A801)}
html body.solo.mob #kbTools>.root-sel .rs-b{display:none!important}
html body.solo.mob #kbTools>.root-sel:not(#_x){order:2!important;flex:none!important}
html body.solo.mob #kbTools>#mtk:not(#_x){order:3!important;flex:none!important}
html body.solo.mob #kbTools #rootName:not(#_x),html body.solo.mob #kbTools #mtkBpm:not(#_x){width:auto!important;min-width:0!important;padding:0 9px!important}
html body.solo.mob #kbTools>:is(.root-sel,#mtk):not(#_x){width:auto!important;min-width:0!important;padding:0 3px!important}
html body.solo.mob #kbTools{gap:5px!important}
html body.solo.mob #kbTools>.mob-snd:not(#_x){padding:0 8px}
@media (max-width:400px){html body.solo.mob #kbTools>.mob-snd svg{display:none}}
@media (max-width:380px){html body.solo.mob #kbTools #mtkBpm small{display:none!important}}
html body.solo.mob #kbTools>.mob-sus:not(#_x){order:4!important;flex:none!important;width:50px;padding:0!important;border-radius:12px!important}
html body.solo.mob #kbTools>.mob-sus svg{display:none}
/* octave and rows */
html body.solo.mob .kb-wrap>.mob-kbar{order:5!important;display:flex;align-items:center;justify-content:space-between;gap:8px;margin:8px 0 6px}
.mob-kbar .mkb-oct{display:flex;align-items:center;gap:4px}
.mob-kbar .mkb-oct button{display:grid;place-items:center;width:44px;height:40px;padding:0;border-radius:10px;border:1px solid #3a3630;background:#1d1b18;color:#FBF6EC;cursor:pointer;-webkit-tap-highlight-color:transparent}
.mob-kbar .mkb-oct button:disabled{opacity:.35;cursor:default}
.mob-kbar .mkb-lab{min-width:74px;text-align:center;font:800 12.5px/1 Nunito,sans-serif;color:#cfc6b4;font-variant-numeric:tabular-nums}
.mob-kbar .mkb-seg{display:flex;border:1px solid #3a3630;border-radius:10px;overflow:hidden}
.mob-kbar .mkb-seg button{height:34px;padding:0 10px;white-space:nowrap;border:0;background:#1d1b18;color:#a99f8e;font:800 12.5px/1 Nunito,sans-serif;cursor:pointer;-webkit-tap-highlight-color:transparent}
.mob-kbar .mkb-seg button[aria-checked="true"]{background:var(--kl,#F6A801);color:#111}
/* two rows of keys */
html body.solo.mob .kb-wrap.kb-rows>.kb-rail{display:none!important}
html body.solo.mob .kb-wrap.kb-rows>.kb-scroll{overflow:hidden!important}
html body.solo.mob .kb.rows2{display:block!important;min-width:0!important;width:100%!important}
html body.solo.mob .kb.rows2>.kw{position:absolute!important;left:calc(100% / 7 * var(--c))!important;top:calc((50% + 4px) * var(--r))!important;width:calc(100% / 7)!important;height:calc(50% - 4px)!important;flex:none!important;box-sizing:border-box!important}
html body.solo.mob .kb.rows2>.kb-black{top:calc((50% + 4px) * var(--r))!important;height:calc((50% - 4px) * .6)!important;width:calc(100% / 7 * .56)!important}
html body.solo.mob .kb.rows2>.kb-house{display:none!important}
/* one row of two octaves: all 14 white keys across the screen, no sideways scrolling */
html body.solo.mob .kb-wrap>.kb-scroll:has(>.kb.win1){overflow:hidden!important}
html body.solo.mob .kb.win1{min-width:0!important;width:100%!important}
html body.solo.mob .kb.win1>.kw{flex:1 1 0!important;min-width:0!important;width:auto!important}
html body.solo.mob .kb.win1>.kb-black{width:calc(100% / var(--nw) * .6)!important}
/* the Sounds sheet: every sound as a tile, two across, nothing cut off */
body.solo.mob .mob-sh{flex-wrap:wrap}
body.solo.mob .mob-sh .mob-pick{order:3;flex:1 1 100%!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;overflow:visible!important;-webkit-mask-image:none!important;mask-image:none!important;margin:2px 0 0!important;padding:0!important}
body.solo.mob .mob-sh .mob-pick[hidden]{display:none!important}
.mob-st{display:flex;align-items:stretch;height:50px;border-radius:14px;border:1px solid #34312b;background:#1d1b18;overflow:hidden;min-width:0}
/* the lit dot says a sound is on; the bright outline says which one you are looking at (they looked alike) */
.mob-st.sel{border-color:var(--kl,#F6A801);background:#2a2722;box-shadow:inset 0 0 0 1px var(--kl,#F6A801)}
.mob-st .mob-pw{flex:none;width:46px;padding:0;border:0;background:none;display:grid;place-items:center;cursor:pointer;-webkit-tap-highlight-color:transparent}
.mob-st .mob-pw i{width:12px;height:12px;border-radius:50%;background:#3a3630;transition:background .15s,box-shadow .15s}
.mob-st.on .mob-pw i{background:var(--kl,#F6A801);box-shadow:0 0 8px var(--kl,#F6A801)}
.mob-st .mob-sn{flex:1 1 auto;min-width:0;padding:0 12px 0 0;border:0;background:none;text-align:left;color:#a99f8e;font:800 14.5px/1.1 Nunito,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;-webkit-tap-highlight-color:transparent}
.mob-st.on .mob-sn,.mob-st.sel .mob-sn{color:#FBF6EC}
.mob-st-add .mob-sn{display:flex;align-items:center;justify-content:center;gap:6px;padding:0 10px;color:#cfc6b4}
}
@media (max-width:620px){
body.solo.mob{padding-bottom:calc(78px + env(safe-area-inset-bottom,0px))}
html body.solo.mob .hero{min-height:0!important;padding-bottom:0!important}
html.hx-solo.hx-mob,html body.solo.mob{background:#0f0e0d!important}
html:not(.ffo-power:where(:not(.fft-power))) body.solo.mob .kb-wrap{margin-top:30px!important}
html:not(.ffo-power:where(:not(.fft-power))) body.solo.mob.mob-short .kb-wrap{margin-top:16px!important} /* room between the header and the power switch on top of the case */
/* short phones (an SE): the little caption over the sound chips goes, and the gaps tighten, so the keys still fit */
html body.solo.mob.mob-short .mob-sounds .mob-lab{display:none!important}
html body.solo.mob.mob-short .kb-wrap .rig-panel>.kb-side{margin-bottom:6px!important}
html body.solo.mob.mob-short .kb-wrap>.mob-sounds{gap:6px;margin-top:0} /* the page is exactly one screen: no extra scroll under the bottom bar */
body.solo.mob .kb-wrap>.kb-hint{position:fixed!important;top:78px;left:0;right:0;margin:0!important;visibility:hidden!important;pointer-events:none!important;z-index:60}
body.solo.mob .kb-switches .rec-take{position:fixed!important;left:12px;right:12px;bottom:calc(86px + env(safe-area-inset-bottom,0px));top:auto!important;visibility:visible!important;pointer-events:auto!important;z-index:230;justify-content:center}
body.solo.mob .kb-hint [role="dialog"]:not([hidden]){visibility:visible;pointer-events:auto}
html body.solo.mob .kb-wrap{display:flex!important;flex-direction:column!important}
html body.solo.mob .kb-wrap>*{order:20}
html body.solo.mob .kb-wrap>.metro,html body.solo.mob .kb-wrap>.stg-bar{order:1!important}
html body.solo.mob .kb-wrap>.rig-panel{display:contents!important}
html body.solo.mob .kb-wrap .rig-panel>.kb-side{margin-bottom:12px!important}
html body.solo.mob .kb-wrap .rig-panel>.jy{display:none!important}
html body.solo.mob .kb-wrap .rig-panel>.kb-side{order:2!important}
body.solo.mob .kb-wrap>.mob-sounds{display:flex;flex-direction:column;gap:8px;order:3;margin-top:4px}
html body.solo.mob .kb-wrap>.kb-tools{order:4!important;display:flex!important;flex-wrap:wrap!important;align-items:center;gap:8px!important;margin:2px 0 0!important;padding:0!important;border:0!important}
html body.solo.mob .kb-wrap>.ctr{order:5!important}
html body.solo.mob .kb-wrap>.kb-scroll{order:6!important}
html body.solo.mob .kb-wrap>.kb-scroll .kb{height:clamp(190px,calc(100vh - 605px),360px)!important;height:var(--mkh,clamp(190px,calc(100dvh - 605px),360px))!important}
html body.solo.mob .kb-wrap>.kb-rail{order:7!important}
html body.solo.mob .kb-wrap>.lp-lanes{order:8!important}
html body.solo.mob #kbTools>*{order:20!important}
html body.solo.mob #kbTools>.mob-sus{display:inline-flex;order:1!important;flex:1 1 0;min-width:0;align-items:center;justify-content:center;gap:7px;height:44px;padding:0 12px;border-radius:999px;border:1px solid #3a3630;background:#262420;color:#FBF6EC;font:800 14px/1 Nunito,sans-serif;cursor:pointer;-webkit-tap-highlight-color:transparent}
html body.solo.mob #kbTools>.mob-sus.on{border-color:var(--kl,#F6A801);color:var(--kl,#F6A801);box-shadow:inset 0 0 0 1px var(--kl,#F6A801)}
html body.solo.mob #kbTools>.mob-sus.on svg{fill:currentColor}
html body.solo.mob #kbTools>.root-sel{order:2!important;flex:none!important;width:auto!important;margin:0!important}
html body.solo.mob #kbTools>#mtk{order:3!important;flex:none!important;width:auto!important;margin:0!important}
html body.solo.mob #kbTools>#mtk :is(.mtk-pm,.mtk-tap,.mtk-leds){display:none!important}
html body.solo.mob #kbTools>#shSel{order:4!important;flex:1 1 100%!important;justify-content:center;margin:0!important}
html body.solo.mob #kbTools>#looper:not([data-mode="idle"]){order:5!important;flex:1 1 100%!important;width:auto!important;margin:0!important}
html body.solo.mob #kbTools>:is(#lnPanel,#sgPanel,#scPanel,.sc-panel){order:6!important;flex:1 1 100%!important}
html body.solo.mob #kbTools>:is(#mvWrap,#ctrTg,.eq-wrap,#eqgBtn,.kl-wrap,.adv-wrap,.rig-plate,.tools-br,#looper[data-mode="idle"]){position:fixed!important;left:12px!important;right:auto!important;top:auto!important;bottom:calc(92px + env(safe-area-inset-bottom,0px))!important;margin:0!important;visibility:hidden!important;pointer-events:none!important;z-index:235}
html body.solo.mob #kbTools :is(.eq-pop,.kl-pop):not([hidden]){visibility:visible;pointer-events:auto;position:fixed!important;left:8px!important;right:8px!important;top:auto!important;bottom:calc(80px + env(safe-area-inset-bottom,0px))!important;width:auto!important;max-width:none!important;max-height:calc(100vh - 170px)!important;max-height:calc(100dvh - 170px)!important;overflow-y:auto!important;transform:none!important;margin:0!important;z-index:236}
/* the bottom bar */
body.solo.mob .mob-dock{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;position:fixed;left:0;right:0;bottom:0;z-index:200;padding:6px 6px calc(8px + env(safe-area-inset-bottom,0px));background:linear-gradient(180deg,rgba(24,22,19,.94),#100f0d);border-top:1px solid #2a2723;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
body.solo.mob .mob-dock button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;height:56px;padding:0;border:0;border-radius:14px;background:none;color:#a99f8e;font:800 11px/1 Nunito,sans-serif;cursor:pointer;-webkit-tap-highlight-color:transparent}
body.solo.mob .mob-dock button[hidden]{display:none}
body.solo.mob .mob-dock button:active{background:#1d1b18}
body.solo.mob .mob-dock button.a,body.solo.mob .mob-dock button.live{color:var(--kl,#F6A801)}
body.solo.mob .mob-dock [data-md="rec"]{color:#e8382b}
body.solo.mob .mob-dock [data-md="rec"].live{color:#ff5a4d}
body.solo.mob .mob-dock [data-md="rec"].live svg{animation:recPulse 1s ease-in-out infinite}
body.solo.mob .mob-dock [data-md="loop"][data-lm="rec"]{color:#ff5a4d}
/* phone tidy (2026-10-26): one clean quick row, one octave control, Rec only red while recording */
html body.solo.mob #kbTools>#shSel{display:none!important} /* the desktop octave and transpose strip spilled off the edge; the arrows above the keys do octaves */
html body.solo.mob .kb-side .ms-min{display:none!important} /* folding the screen means nothing on a phone */
body.solo.mob .mob-dock [data-md="rec"]:not(.live){color:#a99f8e}
body.solo.mob .mob-dock [data-md="rec"]:not(.live) svg{color:#e8382b}
html body.solo.mob .kb-wrap>.mob-kbar .mkb-oct{flex:1 1 auto;justify-content:space-between}
html body.solo.mob .kb-wrap>.mob-kbar .mkb-lab{font-size:14.5px;color:#e8e0d0}
.mob-tiles.t4{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
.mob-tiles.t4 .mob-tile{height:74px;border-radius:14px;padding:4px 3px;gap:7px;font-size:11px;line-height:1.12}
.mob-tiles.t4 .mob-tile span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-width:100%}
.mob-hold>.mob-sec{margin:16px 2px 8px}
.mob-hold>.mob-row.mob-act{margin-top:10px}
/* sound chips */
.mob-lab{display:flex;justify-content:space-between;gap:10px;font:900 10px/1 Nunito,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#7d766a}
.mob-chips{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;margin:0 -12px;padding:2px 12px;scroll-snap-type:x proximity;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12px,#000 calc(100% - 26px),transparent);mask-image:linear-gradient(90deg,transparent 0,#000 12px,#000 calc(100% - 26px),transparent)}
.mob-chips::-webkit-scrollbar{display:none}
.mob-chip{flex:none;scroll-snap-align:start;display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 15px;border-radius:999px;border:1px solid #34312b;background:#1d1b18;color:#a99f8e;font:800 13.5px/1 Nunito,sans-serif;cursor:pointer;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:transform .12s}
.mob-chip:active{transform:scale(.96)}
@media (max-width:374px){.mob-chip{padding:0 11px;gap:5px;font-size:12.5px}}
.mob-chip i{width:8px;height:8px;border-radius:50%;background:#3a3630;transition:background .15s,box-shadow .15s}
.mob-chip.on{color:#FBF6EC;border-color:#6b5317;background:linear-gradient(180deg,#2a2009,#1d1709)}
.mob-chip.on i{background:var(--kl,#F6A801);box-shadow:0 0 8px var(--kl,#F6A801)}
.mob-chip.sel{box-shadow:inset 0 0 0 2px var(--kl,#F6A801);color:#FBF6EC}
/* the sheet */
body.solo.mob .mob-dim{display:block;position:fixed;inset:0;z-index:240;background:rgba(0,0,0,.55);animation:mobFade .2s}
body.solo.mob .mob-sheet{display:flex;flex-direction:column;position:fixed;left:0;right:0;bottom:calc(71px + env(safe-area-inset-bottom,0px));z-index:250;max-height:calc(100vh - 160px - env(safe-area-inset-bottom,0px));max-height:calc(100dvh - 160px - env(safe-area-inset-bottom,0px));box-sizing:border-box;padding:8px 14px 14px;border-radius:24px 24px 0 0;background:linear-gradient(180deg,#24211c,#171512);border-top:3px solid var(--kl,#F6A801);border-bottom:1px solid #2a2723;box-shadow:0 -20px 44px rgba(0,0,0,.6);color:#FBF6EC;transition:transform .2s;animation:mobUp .26s cubic-bezier(.2,.9,.3,1)}
body.solo.mob :is(.mob-sheet,.mob-dim)[hidden]{display:none!important}
/* upright phone: Sounds lives under the keys (no dim, no close), a fixed slice above the bottom bar */
/* in the case itself, under the keys (in the page flow, not floating: an iPhone did not draw the floating version) */
html body.solo.mob .kb-wrap .mob-sheet.inl{position:relative!important;inset:auto!important;order:30!important;z-index:1;flex:none;max-height:none;margin:10px 0 0;padding:6px 12px 8px;border-radius:16px;border:1px solid #34312b;border-top:2px solid var(--kl,#F6A801);box-shadow:none;animation:none;transform:none!important}
body.solo.mob .mob-sheet.inl :is(.mob-grab,.mob-x,.mob-t){display:none!important}
body.solo.mob.mob-inline .mob-dock [data-md="snd"]{display:none}
body.solo.mob .mob-sheet:not(.inl) .mob-qk{display:none!important}
html body.solo.mob .kb-wrap .mob-ph{order:30!important;flex:none;margin-top:10px}
body.solo.mob .mob-sheet.inl .mob-qk{margin-top:10px;gap:6px}
body.solo.mob .mob-sheet.inl .mob-qk .mob-tile{height:52px;gap:4px;border-radius:12px;font-size:10.5px}
body.solo.mob .mob-sheet.inl .mob-qk .mob-tile svg{width:17px;height:17px;flex:none}
/* compact: the tab already names the sound, so its ON switch and style share one line, then the knobs */
html body.solo.mob .rig-panel .mob-sheet.inl .mix-strip.mob-sel .ms-name{display:none!important}
html body.solo.mob .rig-panel .mob-sheet.inl #mixPanel>.mix-strip.mob-sel:not(#_x#_y){gap:10px!important}
html body.solo.mob .rig-panel .mob-sheet.inl .mix-strip.mob-sel .ms-h{flex-wrap:nowrap!important;gap:10px!important}
html body.solo.mob .rig-panel .mob-sheet.inl .mix-strip.mob-sel .ms-h>:is(.pad-styles,.syn-sel,.drm-kits){flex:1 1 auto!important;order:-1}
html body.solo.mob .rig-panel .mob-sheet.inl .mix-strip.mob-sel .ms-h .led-btn{margin-left:0!important;flex:none!important}
html body.solo.mob .rig-panel .mob-sheet.inl .mix-strip.mob-sel .ms-k>*{zoom:1}
body.solo.mob .mob-sheet.inl .mob-sh{padding:4px 0 8px}
body.solo.mob .mob-sheet.inl .mob-sh .mob-pick{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto!important;gap:7px!important;scrollbar-width:none;margin:0!important}
body.solo.mob .mob-sheet.inl .mob-sh .mob-pick::-webkit-scrollbar{display:none}
body.solo.mob .mob-sheet.inl .mob-sh .mob-pick>*{flex:0 0 auto!important;min-width:112px;height:40px!important}
.mob-grab{flex:none;align-self:center;width:42px;height:5px;border-radius:3px;background:#4a453d;margin:2px 0 4px}
.mob-sh{flex:none;display:flex;align-items:center;gap:10px;padding:6px 0 10px}
.mob-sh .mob-pick{flex:1;min-width:0;margin:0;padding:2px 0}
.mob-sh .mob-pick[hidden],.mob-t[hidden]{display:none}
.mob-t{flex:1;font:700 21px/1 Fredoka,sans-serif;color:var(--kl,#F6A801)}
.mob-x{flex:none;display:grid;place-items:center;width:36px;height:36px;padding:0;border-radius:50%;border:1px solid #3a3630;background:#1d1b18;color:#cfc6b4;font:400 22px/1 sans-serif;cursor:pointer}
.mob-sb{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;margin:0 -14px;padding:0 14px 4px}
.mob-sb>[hidden]{display:none!important}
/* one sound at a time, laid out cleanly: name and ON on top, then its style, then its knobs in one even row */
html body.solo.mob .rig-panel .mob-sheet #mixPanel:not([hidden]){display:block!important;width:auto!important;margin:0!important;padding:0!important;border:0!important;background:none!important;box-shadow:none!important;overflow:visible!important}
html body.solo.mob .rig-panel .mob-sheet #mixPanel:not(.mob-all)>.mix-strip:not(.mob-sel):not(#_x#_y),html body.solo.mob .rig-panel .mob-sheet #mixPanel>:is(.mix-head,.mix-x):not(#_x#_y),html body.solo.mob .rig-panel .mob-sheet #mixPanel[hidden]:not(#_x#_y){display:none!important}
html body.solo.mob .rig-panel .mob-sheet #mixPanel>.mix-strip.mob-sel:not(#_x#_y){display:flex!important;flex-direction:column!important;gap:16px!important;width:auto!important;min-height:0!important;margin:0!important;padding:4px 0 10px!important;border:0!important;background:none!important;box-shadow:none!important}
html body.solo.mob .rig-panel .mob-sheet .mix-strip.mob-sel .ms-h{display:flex!important;flex-wrap:wrap!important;align-items:center!important;gap:12px!important;width:auto!important;grid-column:auto!important;grid-row:auto!important}
html body.solo.mob .rig-panel .mob-sheet .mix-strip.mob-sel .ms-h{justify-content:flex-start!important}
html body.solo.mob .rig-panel .mob-sheet .mix-strip.mob-sel .ms-name{font-size:18px!important;pointer-events:none;margin:0!important;flex:0 0 auto!important;justify-content:flex-start!important;text-align:left!important}
html body.solo.mob .rig-panel .mob-sheet .mix-strip.mob-sel .ms-k>*{zoom:1.12}
html body.solo.mob .rig-panel .mob-sheet .mix-strip.mob-sel .ms-name::before,html body.solo.mob .rig-panel .mob-sheet .mix-strip.mob-sel .ms-min{display:none!important}
html body.solo.mob .rig-panel .mob-sheet .mix-strip.mob-sel .ms-h .led-btn{margin-left:auto!important}
html body.solo.mob .rig-panel .mob-sheet .mix-strip.mob-sel .ms-h>:is(.pad-styles,.syn-sel,.drm-kits){flex:1 1 100%!important;max-width:100%!important;min-width:0!important;margin:0!important;overflow-x:auto;scrollbar-width:none}
html body.solo.mob .rig-panel .mob-sheet .mix-strip.mob-sel>:is(.pad-styles,.syn-sel){width:auto!important;max-width:100%!important;margin:0!important;grid-column:auto!important;grid-row:auto!important}
html body.solo.mob .rig-panel .mob-sheet .mix-strip.mob-sel .ms-k{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(62px,1fr))!important;justify-items:center!important;align-items:start!important;gap:14px 4px!important;width:100%!important;align-self:stretch!important;box-sizing:border-box!important;grid-column:auto!important;grid-row:auto!important;margin:0!important}
/* pop-out lists (sound styles, kits) open inside the sheet instead of floating off it */
html body.solo.mob .rig-panel .mob-sheet .mix-strip.mob-sel .pad-styles{flex-wrap:wrap!important;overflow:visible!important;height:auto!important;max-height:none!important;position:relative!important}
html body.solo.mob .rig-panel .mob-sheet .mix-strip.mob-sel [data-pop]:not([hidden]){position:static!important;inset:auto!important;transform:none!important;flex:1 1 100%!important;width:auto!important;max-width:none!important;max-height:none!important;margin:8px 0 0!important;box-shadow:none!important;z-index:auto!important}
html body.solo.mob .rig-panel .mob-sheet .mix-strip.mob-sel [data-pop]:not([hidden])::before{display:none!important}
html body.solo.mob #rootPick:not([hidden]){position:fixed!important;left:8px!important;right:8px!important;top:auto!important;bottom:calc(80px + env(safe-area-inset-bottom,0px))!important;width:auto!important;max-width:none!important;transform:none!important;margin:0!important;z-index:236}
html body.solo.mob #rootPick:not([hidden])::before,html body.solo.mob #rootPick:not([hidden])::after{display:none!important}
body.solo.mob .mob-sheet .mob-sb>.jy{display:flex!important;margin:4px 0 8px!important;order:0!important}
/* More and Practice tiles */
.mob-sec{font:900 10px/1 Nunito,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#7d766a;margin:14px 0 8px}
.mob-hold>.mob-sec:first-child{margin-top:2px}
.mob-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.mob-tile{position:relative;min-width:0;height:82px;padding:6px;border-radius:16px;border:1px solid #34312b;background:#1b1916;color:#FBF6EC;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;font:800 12px/1.15 Nunito,sans-serif;text-align:center;cursor:pointer;-webkit-tap-highlight-color:transparent}
.mob-tile:active{transform:scale(.97)}
.mob-tile svg{color:var(--kl,#F6A801)}
.mob-tile i{display:none;position:absolute;top:9px;right:10px;width:7px;height:7px;border-radius:50%;background:#3ddc84;box-shadow:0 0 6px rgba(61,220,132,.8)}
.mob-tile.on{border-color:#5a400a;background:linear-gradient(180deg,#2a1f0b,#1b1609)}.mob-tile.on i{display:block}
.mob-row{display:flex;gap:8px;margin-top:16px}
.mob-pill.on{background:#F6A801;border-color:#F6A801;color:#111}
.mob-pill{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:0 16px;border-radius:999px;border:1px solid #34312b;background:#1d1b18;color:#FBF6EC;font:800 14px/1 Nunito,sans-serif;cursor:pointer}
.mob-pill svg{width:19px;height:19px}
.mob-midi{flex:1 1 auto;min-width:0}.mob-midi span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mob-sq{flex:0 0 46px;padding:0}.mob-pill:disabled{opacity:.4}
.mob-none{color:#8a8273;font:700 13px/1.4 Nunito,sans-serif}
/* tidy pass: the power rocker lives in More on phones, so the case sits right under the header */
html:not(.ffo-power:where(:not(.fft-power))) body.solo.mob .kb-wrap>.pw-sw{display:none!important}
html body.solo.mob .hero .wrap>.kb-wrap{margin-top:12px!important}
html body.solo.mob:not(.fs-on) .hero{padding-top:calc(10px + env(safe-area-inset-top,0px))!important} /* no top bar on ch1: just clear the notch */
/* + Sounds is a small round button so the default three sounds and it fit on one line */
body.solo.mob .mob-sounds .mob-add{width:38px;padding:0;justify-content:center}
body.solo.mob .mob-sounds .mob-add span{display:none}
body.solo.mob .mob-sounds .mob-add svg{margin:0}
/* MIDI gets its own full row; undo, redo, reset and player share the row under it, each with a label */
.mob-row{flex-wrap:wrap}
.mob-midi{flex:1 1 100%}
.mob-sq{flex:1 1 0;height:58px;flex-direction:column;gap:5px;border-radius:16px;font:800 11px/1 Nunito,sans-serif;color:#cfc6b4}
.mob-sq svg{color:var(--kl,#F6A801)}
}
/* very narrow phones: Sustain drops its dot so the word fits */
@media (max-width:380px){
html body.solo.mob #kbTools{column-gap:6px!important}
html body.solo.mob #kbTools>.mob-sus{flex:1 0 auto;padding:0 10px;font-size:13px}
html body.solo.mob #kbTools>.mob-sus svg{display:none}
html body.solo.mob .rs-key #rootName{min-width:54px;padding:0 5px}
html body.solo.mob .rs-key .rs-b{width:20px;flex-basis:20px}
html body.solo.mob #kbTools .mtk{padding:0 3px}
}
/* the smallest phones: the KEY and BPM labels step aside, the readouts speak for themselves */
@media (max-width:340px){
html body.solo.mob .rs-key #rootName::before,html body.solo.mob #mtkBpm small{display:none!important}
html body.solo.mob .rs-key #rootName{min-width:34px}
html body.solo.mob #mtkBpm{min-width:54px!important}
}
.cs-toast{position:fixed;left:50%;top:84px;transform:translateX(-50%);z-index:9999;padding:10px 18px;border-radius:999px;background:#1d1b18;border:1px solid #5a400a;color:#ffc93d;font:800 13px/1 Nunito,sans-serif;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.kla-card{position:fixed;z-index:236;box-sizing:border-box;display:flex;flex-direction:column;gap:10px;padding:16px 16px 12px;border-radius:18px;background:linear-gradient(180deg,#24211c,#171512);border:1px solid #3a3630;border-top:3px solid var(--kl,#F6A801);box-shadow:0 24px 54px rgba(0,0,0,.65);color:#FBF6EC;font:600 13px/1.4 Nunito,system-ui,sans-serif;animation:cwIn .2s cubic-bezier(.2,.9,.3,1)}
.kla-card[hidden]{display:none!important}
.kla-card.kla-sheet{left:8px!important;right:8px;width:auto!important;top:auto!important;bottom:calc(80px + env(safe-area-inset-bottom,0px))!important;max-height:calc(100dvh - 170px)!important}
.kla-h{flex:none;display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.kla-h b{display:block;font:700 20px/1.1 Fredoka,sans-serif;color:#FBF6EC}.kla-h span{display:block;margin-top:3px;font:600 12px/1.35 Nunito,sans-serif;color:#a99f8e}
.kla-x{flex:none;display:grid;place-items:center;width:32px;height:32px;padding:0;border-radius:50%;border:1px solid #3a3630;background:#1d1b18;color:#cfc6b4;font:400 20px/1 sans-serif;cursor:pointer}
.kla-b{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;margin:0 -16px;padding:0 16px 24px;-webkit-mask:linear-gradient(180deg,#000 calc(100% - 22px),transparent);mask:linear-gradient(180deg,#000 calc(100% - 22px),transparent)}
.kla-b>.kl-pop{position:static!important;display:block!important;width:auto!important;max-width:none!important;max-height:none!important;margin:0!important;padding:0!important;border:0!important;background:none!important;box-shadow:none!important;transform:none!important;visibility:visible!important}
.kla-b>.kl-pop>.kl-h{display:none!important}
.kla-b .klg{margin:0 0 14px!important}
/* Keys only: the bottom bar's controls in the toolbar as small icons, the same size as the toolbar's own */
html body.solo:not(.mob) .kb-switches>.kt-dock{order:11!important;display:flex;align-items:center;gap:4px;margin:0 0 0 2px;padding:0 0 0 8px;border-left:1px solid rgba(255,255,255,.09);height:28px;position:relative}
html body.solo:not(.mob) .kb-switches:has(>.kt-dock.kt-row){flex-wrap:wrap!important;row-gap:8px}
html body.solo.psz-keys:not(.mob) .kb-switches{zoom:.86}
html body.solo.psz-keys:not(.mob) .kb-switches #pnBtn .rg-lab{display:none!important}
/* touch screens: the sound panels are one row that slides sideways, each at its own full size */
html body.solo.np-slide:not(.mob) #mixPanel{flex-wrap:nowrap!important;overflow-x:auto!important;overflow-y:hidden!important;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;justify-content:flex-start!important}
html body.solo.np-slide:not(.mob) #mixPanel::-webkit-scrollbar{display:none}
html body.solo.np-slide:not(.mob) #mixPanel>.mix-strip{flex:0 0 auto!important;width:max-content!important;max-width:none!important}
html body.solo.np-slide:not(.mob) #mixPanel>.mix-strip .ms-rs{display:none!important}
/* touch screens: the bottom bar is one row that slides sideways too */
html body.solo.bt-slide:not(.mob) #kbTools{flex-wrap:nowrap!important;overflow-x:auto!important;overflow-y:hidden!important;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;justify-content:flex-start!important;padding-top:4px!important;padding-bottom:4px!important}
html body.solo.bt-slide:not(.mob) #kbTools::-webkit-scrollbar{display:none}
html body.solo.bt-slide:not(.mob) #kbTools>*{flex-shrink:0!important}
/* the ch1 mark stays put at the end of the sliding bar; everything else slides in under it, with a little room and a soft fade */
html body.solo.bt-slide:not(.mob) #kbTools>.rig-plate{position:sticky!important;right:0!important;left:auto!important;z-index:3;margin-left:22px!important;box-shadow:-14px 0 0 0 var(--bar-bg,#0f0e0d),-34px 0 16px 2px var(--bar-bg,#0f0e0d)!important}
html body.solo.tb-slide:not(.mob) .kb-switches>.rig-plate.pl-top{position:sticky!important;left:0!important;z-index:3;box-shadow:12px 0 0 0 var(--case-top,#1f1d1a),30px 0 14px 2px var(--case-top,#1f1d1a)!important}
html body.solo.tb-slide:not(.mob) .tb-fade.l{display:none}html body.solo.tb-slide.tb-pinned:not(.mob) .tb-fade{display:none!important}
/* touch screens: the toolbar is one row that slides sideways (no scrollbar, a soft fade where there is more) */
html body.solo.tb-slide:not(.mob) .kb-switches{flex-wrap:nowrap!important;overflow-x:auto!important;overflow-y:hidden!important;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-top:4px!important;padding-bottom:4px!important}
html body.solo.tb-slide:not(.mob) .kb-switches::-webkit-scrollbar{display:none}
html body.solo.tb-slide:not(.mob) .kb-switches>*{flex-shrink:0!important}
html body.solo.tb-slide:not(.mob) .kb-switches>.kt-dock.kt-row{flex:none;order:11!important}
html body.solo.tb-slide:not(.mob) .tb-fade{position:absolute;top:0;bottom:0;width:34px;pointer-events:none;z-index:5;opacity:0;transition:opacity .2s}
html body.solo.tb-slide:not(.mob) .tb-fade.on{opacity:1}
.tb-fade{display:none}html body.solo.tb-slide:not(.mob) .tb-fade{display:block}
.tb-fade.l{background:linear-gradient(90deg,var(--case-top,#1f1d1a),transparent)}.tb-fade.r{background:linear-gradient(270deg,var(--case-top,#1f1d1a),transparent)}
/* Keys only: every icon button the same width, the same gap between them all */
html body.solo.psz-keys:not(.mob) .kb-switches{column-gap:7px!important}
html body.solo.psz-keys:not(.mob) .kb-switches>:is(#rgKeys,#lnTg,#sgTg,#libBtn,#avCam,#avMic,#avText,#avStage,#avAmb,#avSv,#avPv,#avBm,#avConn,#avBoard,#rgStudio,#pnBtn,#avFb,#avUndo,#avRedo,#avReset,#kmEd){box-sizing:border-box!important;width:36px!important;min-width:36px!important;padding:0!important;gap:0!important;justify-content:center!important;margin-left:0!important;margin-right:0!important}
html body.solo.psz-keys:not(.mob) .kb-switches>.kt-dock{gap:7px!important}
/* Keys only: the icon buttons stay round; their names never slide out inside them (the tooltip says what each one is) */
html body.solo.psz-keys:not(.mob) .kb-switches>:is(#rgKeys,#lnTg,#sgTg,#libBtn,#avCam,#avMic,#avText,#avStage,#avAmb,#avSv,#avPv,#avBm,#avConn,#avBoard,#rgStudio,#pnBtn,#avFb,#avUndo,#avRedo,#avReset,#kmEd) :is(.hx-lab,.rg-lab,#recLabel){display:none!important}
html body.solo.psz-keys:not(.mob) .kb-switches>#airBtn{width:36px!important;min-width:36px!important;padding:0!important;justify-content:center!important;gap:0!important}html body.solo.psz-keys:not(.mob) .kb-switches>#airBtn>span{display:none!important}
html body.solo.psz-keys:not(.mob) .kb-switches>:is(#rgKeys,#rgStudio,#pnBtn)>svg:nth-of-type(2){display:none!important}
html body.solo.psz-keys:not(.mob) .kt-dock :is(.kt-ic,.kl-btn,.lp-main) :is(.hx-lab,.kt-lab){display:none!important}
html body.solo.psz-keys:not(.mob) .kt-dock :is(.kt-ic,.kl-btn,.lp-main){width:36px!important;min-width:36px!important}
/* Keys only: the engraved name on the front of the case. Cut in: a fill darker than the case, a shadowed upper edge and a faint lit
lower edge (the light comes from above) */
.kb-brand{display:none}
html body.solo:not(.mob) .kb-wrap>.kb-brand.kbb-on{display:flex;justify-content:center;align-items:center;position:absolute;left:0;right:0;height:16px;margin:0;z-index:2;pointer-events:none;user-select:none}
.kb-brand .cha{font-size:14px;letter-spacing:.04em;color:rgba(255,255,255,.30);text-shadow:0 -1px 0 rgba(0,0,0,.9),0 1px 0 rgba(255,255,255,.08)}
.kb-brand .cha b{color:rgba(246,168,1,.55);color:color-mix(in srgb,var(--yellow,#F6A801) 55%,transparent);text-shadow:0 -1px 0 rgba(0,0,0,.9),0 1px 0 rgba(255,210,120,.10)}
html body.solo.psz-keys:not(.mob) .kb-switches>.ml-ctl,html body.solo.psz-keys:not(.mob) #mlBtn{display:none!important} /* Keys only: no MIDI learn */ /* Keys only: the toolbar a touch bigger (it still steps down if the window is narrow) */
html body.solo:not(.mob) .kb-switches>.kt-dock.kt-row{order:300!important;flex:0 0 100%;justify-content:center;border-left:0;padding:0;margin:0!important;height:auto}
.kt-dock>*{margin:0!important;flex:none;position:relative}
.kt-dock .kt-ic,.kt-dock .kl-btn,.kt-dock .lp-main{box-sizing:border-box;width:32px!important;min-width:32px!important;height:28px!important;padding:0!important;gap:0!important;display:grid!important;place-items:center;border-radius:999px!important;border:1px solid #3a3630!important;background:#1d1b18!important;color:#a89f8c!important;box-shadow:none!important;cursor:pointer;position:relative}
.kt-dock .kt-ic:hover,.kt-dock .kl-btn:hover,.kt-dock .lp-main:hover,.kt-dock .kt-ic[aria-expanded="true"],.kt-dock .kl-btn[aria-expanded="true"],.kt-dock .kl-btn[aria-pressed="true"]{color:#F6A801!important;border-color:rgba(246,168,1,.5)!important}
.kt-dock .kl-btn>span:not(.kl-dot),.kt-dock .kl-btn>i,.kt-dock #lpLab,.kt-dock .lp-ring{display:none!important}
.kt-dock #lpN:empty{display:none}
.kt-dock .kl-btn svg,.kt-dock .lp-main svg,.kt-dock .kt-ic svg{width:18px!important;height:18px!important;grid-area:1/1;position:static!important;margin:0!important;left:auto!important;top:auto!important;color:inherit!important}
.kt-dock .lp-main>em{position:absolute!important;top:-5px;right:-5px;margin:0!important;font:800 9px/14px Nunito,sans-serif;min-width:14px;height:14px;border-radius:7px;background:#F6A801;color:#111;text-align:center;padding:0 3px;box-sizing:border-box}
.kt-dock .kl-dot{grid-area:1/1;margin:0!important;width:12px!important;height:12px!important;box-shadow:none!important}
.kt-dock .lp{gap:4px}.kt-dock .lp-b{height:28px!important;width:28px!important}
.kt-dock .lp[data-mode="rec"] .lp-main,.kt-dock .lp[data-mode="arm"] .lp-main{color:#ff5a4f!important;border-color:rgba(255,90,79,.6)!important}
.kt-dock .lp[data-mode="play"] .lp-main{color:#F6A801!important;border-color:rgba(246,168,1,.5)!important}
.kt-dock .kt-dot{display:none;position:absolute;top:3px;right:6px;width:6px;height:6px;border-radius:50%;background:#F6A801}
.kt-dock .kt-ic.kt-set .kt-dot{display:block}
.kt-dock .kt-ic.kt-on{color:#F6A801!important;border-color:rgba(246,168,1,.5)!important}
.kt-dock .kt-pop{position:absolute;top:calc(100% + 10px);z-index:60;padding:10px 12px;border-radius:16px;background:#1d1b18;border:1px solid #3a3630;box-shadow:0 18px 40px rgba(0,0,0,.55);display:flex;align-items:center;width:max-content}
.kt-dock .kt-pop[hidden]{display:none}
.kt-dock .kt-pop>*{margin:0!important}
.kt-pop[data-k="oc"] .sh-g[data-k="tr"],.kt-pop[data-k="tr"] .sh-g[data-k="oc"],.kt-pop .sh-sep{display:none!important}
.kt-pop .root-pick{bottom:auto!important;top:calc(100% + 10px)!important}
.kt-dock .kl-pop{bottom:auto!important;top:calc(100% + 10px)!important;max-height:calc(100vh - 260px)!important;overflow-y:auto}
.kla-b>.adv-row{display:block!important;margin:0 0 14px!important;padding:0 0 14px!important;border:0!important;border-bottom:1px solid #2e2a25!important;background:none!important;box-shadow:none!important}
.kla-b>.adv-row .adv-l{margin:0 0 9px}.kla-b>.adv-row .adv-l h3{margin:0;font:800 11px/1.2 Nunito,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#a99f8e}.kla-b>.adv-row .adv-l p{display:none}
.kla-b>.adv-row .th-pick,.kla-b>.adv-row .cs-pick{width:100%}
.ch1-twin{display:none}
html:not(.ffo-ch1twin:where(:not(.fft-ch1twin))) body.solo .rig-panel .jy>.ch1-twin{display:block;align-self:center;flex:none;width:54px;height:54px;margin:-4px auto 4px;padding:0;border:0;border-radius:11px;background:none;cursor:pointer;filter:drop-shadow(0 3px 6px rgba(0,0,0,.55));transition:transform .25s cubic-bezier(.2,.9,.3,1.3)}
html:not(.ffo-ch1twin:where(:not(.fft-ch1twin))) body.solo .rig-panel .jy>.ch1-twin:hover{transform:scale(1.08)}
html:not(.ffo-ch1twin:where(:not(.fft-ch1twin))) body.solo .rig-panel .jy>.ch1-twin svg{display:block;width:100%;height:100%}
/* the column next to the chord screen lines up with the boxes beside it: the ch1 badge on the top edge, the time under it,
pitch and mod at the bottom with its label on the bottom edge */
@media (min-width:621px){
body.solo.jy-on .rig-panel .jy{align-self:stretch;justify-content:space-between;gap:6px}
html:not(.ffo-ch1twin:where(:not(.fft-ch1twin))) body.solo.jy-on .rig-panel .jy>.ch1-twin{order:-2;width:48px;height:48px;margin:0 auto}
body.solo.jy-on .rig-panel .jy>.jy-clock{order:-1;margin-top:auto;margin-bottom:auto} /* the time sits centred between the badge and pitch and mod */
body.solo.jy-on .rig-panel .jy>.jy-pad{order:0;margin-top:0}
body.solo.jy-on .rig-panel .jy>small{order:1;margin-bottom:0}
}
.knob.ain-gate .gate-led{position:absolute;top:2px;right:2px;width:7px;height:7px;border-radius:50%;background:#3a3630;transition:background .08s}
.knob.ain-gate.on .gate-led{background:#5a2620}.knob.ain-gate.on.open .gate-led{background:#3ddc84;box-shadow:0 0 6px rgba(61,220,132,.8)}
.knob.ain-gate{position:relative}
/* dark, thin scrollbars on everything in ch1: never a white bar */
body.solo,body.solo *{scrollbar-width:thin;scrollbar-color:#4a453d transparent}
/* the trail scrolls without a bar (it would sit over the chips): swipe, trackpad, or the mouse wheel */
body.solo .ctr-list,body.solo .nmb *{scrollbar-width:none}
body.solo ::-webkit-scrollbar{width:8px;height:8px;background:transparent}
body.solo ::-webkit-scrollbar-track{background:transparent}
body.solo ::-webkit-scrollbar-thumb{background:#4a453d;border-radius:8px;border:2px solid transparent;background-clip:padding-box}
body.solo ::-webkit-scrollbar-thumb:hover{background-color:#6a6355}
body.solo ::-webkit-scrollbar-corner{background:transparent}
/* ---------- ch1 On Air (switch: onair) ---------- */
.air-btn{display:none}
html:not(.ffo-onair:where(:not(.fft-onair))) body.solo .kb-switches .air-btn{order:196;position:relative;display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px 0 9px;border-radius:999px;border:1px solid #3a3630;background:#1d1b18;color:#cfc6b4;font:800 12.5px/1 var(--body);cursor:pointer;margin-left:auto;white-space:nowrap}
html:not(.ffo-onair:where(:not(.fft-onair))) body.solo .kb-switches #airBtn~#avAmb,html:not(.ffo-onair:where(:not(.fft-onair))) body.solo .kb-switches #airBtn~#avBm,html:not(.ffo-onair:where(:not(.fft-onair))) body.solo .kb-switches #airBtn~#avCam,html:not(.ffo-onair:where(:not(.fft-onair))) body.solo .kb-switches #airBtn~#avMic,html:not(.ffo-onair:where(:not(.fft-onair))) body.solo .kb-switches #airBtn~#midiBtn{margin-left:0!important}
.air-btn:hover,.air-btn.open{color:#FBF6EC;border-color:#5a4a30}
.air-btn svg{flex:none}
.air-btn .air-dot{width:7px;height:7px;border-radius:50%;background:#4a2420;flex:none}
.air-btn.live{color:#FBF6EC;border-color:#7a2a26;background:#2a1513}
.air-btn.live .air-dot{background:#ff3b30;box-shadow:0 0 8px #ff3b30,0 0 2px #ffb3ad inset}
body.solo.mob .kb-switches .air-btn span{display:none}
.air-card .av-body{display:flex;flex-direction:column;gap:12px}
.air-pw{display:flex;align-items:center;gap:12px;width:100%;height:52px;padding:0 16px;box-sizing:border-box;border-radius:14px;border:1px solid #3a3630;background:#1d1b18;color:#8a8170;cursor:pointer;font-family:var(--body);text-align:left}
.air-pw b{font:400 26px/1 VT323,monospace;letter-spacing:.08em;color:#6b5b4a;white-space:nowrap;flex:none}
.air-pw .air-st{margin-left:auto;font:400 18px/1 VT323,monospace;color:#8a8170;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.air-lamp{width:14px;height:14px;border-radius:50%;flex:none;background:radial-gradient(circle at 40% 35%,#6a3a36,#3a1a18);box-shadow:inset 0 0 0 1px rgba(0,0,0,.5)}
.air-pw[aria-checked="true"]{border-color:#7a2a26;background:linear-gradient(180deg,#2c1614,#1d1110)}
.air-pw[aria-checked="true"] b{color:#ff5a4f;text-shadow:0 0 10px rgba(255,59,48,.65)}
.air-pw[aria-checked="true"] .air-st{color:#ffc93d}
.air-pw[aria-checked="true"] .air-lamp{background:radial-gradient(circle at 40% 35%,#ffd2cc,#ff3b30 45%,#a01c14);box-shadow:0 0 12px #ff3b30,0 0 2px #fff inset}
.air-pw:focus-visible,.air-tuner:focus-visible{outline:2px solid #F6A801;outline-offset:2px}
/* the tuning dial: an old radio's glass with a red needle */
.air-tuner{position:relative;height:70px;border-radius:12px;background:linear-gradient(180deg,#3a2a12,#22180a);box-shadow:inset 0 0 0 1px rgba(246,168,1,.25),inset 0 8px 18px rgba(0,0,0,.45);cursor:ew-resize;touch-action:none;user-select:none;overflow:hidden}
.air-scale{position:absolute;left:18px;right:18px;top:0;bottom:0}
.air-scale i{position:absolute;top:10px;width:1px;height:12px;margin-left:-.5px;background:rgba(255,214,140,.55)}
.air-scale i em{position:absolute;top:14px;left:50%;transform:translateX(-50%);font:400 14px/1 VT323,monospace;font-style:normal;color:rgba(255,214,140,.7)}
.air-scale b{position:absolute;bottom:8px;transform:translateX(-50%);font:800 9.5px/1 var(--body);letter-spacing:.06em;text-transform:uppercase;color:#d8a52a;white-space:nowrap}
.air-scale b::before{content:"";position:absolute;left:50%;top:-6px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:#d8a52a}
.air-needle{position:absolute;top:4px;bottom:4px;width:2px;margin-left:-1px;border-radius:1px;background:#ff3b30;box-shadow:0 0 8px rgba(255,59,48,.8);pointer-events:none}
.air-tuner .air-needle{left:50%}
.air-scale+.air-needle{transform:translateX(0)}
.air-glass{position:absolute;inset:0;border-radius:12px;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,0) 45%);pointer-events:none}
.air-card:not(.air-on) .air-tuner{filter:saturate(.4) brightness(.8)}
.air-chips{display:flex;gap:6px}
.air-chips button{flex:1 1 auto;padding:0 8px!important;font-size:11px!important}
.air-chips button{height:34px;padding:0 4px;border-radius:999px;border:1px solid #3a3630;background:#1d1b18;color:#cfc6b4;font:800 11.5px/1 var(--body);min-width:0;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.air-chips button[aria-checked="true"]{border-color:#F6A801;background:#2a2112;color:#FBF6EC}
.air-k{display:grid;grid-template-columns:56px 1fr 62px;align-items:center;gap:10px;font:800 12.5px/1 var(--body);color:#cfc6b4}
.air-k b{font-weight:800;color:#a99f8e;text-align:right}
.air-k input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;margin:0;border-radius:3px;background:linear-gradient(90deg,var(--kl,#F6A801) var(--v,50%),#34302a var(--v,50%));cursor:pointer}
.air-k input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--cream,#FBF6EC);border:2px solid #111;box-shadow:0 1px 4px rgba(0,0,0,.5)}
.air-k input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--cream,#FBF6EC);border:2px solid #111}
.air-note{margin:0;font:600 12px/1.35 var(--body);color:#8a8170}
.lcd-top .lcd-air{padding:0 4px;border-radius:3px;line-height:13px;background:#ff3b30;color:#1a0503;text-shadow:none;box-shadow:0 0 8px rgba(255,59,48,.6)}
.lcd-top .lcd-air[hidden]{display:none}
/* ---------- ch1 loading screen (switch: loadscreen): a glimpse of the rig while the pianos load ---------- */
.ch-ld{position:fixed;inset:0;z-index:10050;overflow:hidden;background:#0b0a08;color:#FBF6EC;font-family:var(--body);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4vh 16px 0;box-sizing:border-box;transition:opacity .38s ease,visibility .38s}
.ch-ld.out{opacity:0;visibility:hidden;pointer-events:none}
.ch-ld .ld-glow{position:absolute;left:-10%;right:-10%;top:42%;height:58%;background:radial-gradient(50% 50% at 50% 50%,rgba(246,168,1,.18),rgba(246,168,1,0) 70%);animation:ldglow 3.2s ease-in-out infinite;pointer-events:none}
.ch-ld .ld-left{position:relative;display:flex;flex-direction:column;align-items:center;width:100%}
.ch-ld .ld-pill{position:relative;padding:6px 12px;border:1.5px solid #F6A801;border-radius:999px;font:700 clamp(9px,1.2vh,11px)/1 "Inter","Segoe UI",system-ui,-apple-system,sans-serif;letter-spacing:.24em;color:#F6A801;padding-left:calc(12px + .24em)}
.ch-ld .ld-mark{position:relative;margin-top:clamp(12px,2vh,20px);width:auto;height:clamp(56px,10vh,96px);aspect-ratio:1490/712;color:#F6A801;filter:drop-shadow(0 0 18px rgba(246,168,1,.35))}
.ch-ld .ld-cap{position:relative;margin-top:6px;font:600 clamp(9px,1.2vh,11px)/1 "Inter","Segoe UI",system-ui,-apple-system,sans-serif;letter-spacing:.42em;padding-left:.42em;color:#a99f8e}
.ch-ld h1{position:relative;margin:clamp(14px,2.4vh,24px) 0 0;text-align:center;font:700 clamp(24px,min(4.4vh,7.6vw),40px)/1.1 "Inter","Segoe UI",system-ui,-apple-system,sans-serif;letter-spacing:-.03em}
.ch-ld h1 span{color:#F6A801}
.ch-ld p{position:relative;margin:clamp(6px,1.2vh,12px) 0 0;text-align:center;font-family:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;font-size:clamp(13px,1.8vh,16px);font-weight:500;letter-spacing:-.005em;color:#cfc6b4}
/* the rig, straight on and sharp: the keys play C, Am, F, G, the chord screen names each one */
.ch-ld .ld-stage{position:relative;margin-top:clamp(26px,5vh,48px);width:min(100%,920px,calc((100vh - 400px) * 1.923))}
.ch-ld .ld-pic{position:relative;aspect-ratio:2400/1248;border-radius:clamp(8px,1.4vw,16px);overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.7),0 0 0 1px rgba(246,168,1,.14)}
.ch-ld .ld-pic img{position:absolute;inset:0;width:100%;height:100%;display:block}
.ch-ld .ld-pic img+img{opacity:0}
.ch-ld.ld-anim .ld-pic img{animation:ldf 8s -.6s infinite}.ch-ld.ld-anim .ld-pic img:nth-child(2){animation-delay:1.4s}.ch-ld.ld-anim .ld-pic img:nth-child(3){animation-delay:3.4s}.ch-ld.ld-anim .ld-pic img:nth-child(4){animation-delay:5.4s}
@keyframes ldf{0%{opacity:0}5%,25%{opacity:1}30%,100%{opacity:0}}
.ch-ld .ld-tag{position:absolute;z-index:2;padding:.62em 1.1em;border-radius:999px;background:#F6A801;color:#111;font:600 clamp(10px,1.5vh,14px)/1 "Inter","Segoe UI",system-ui,-apple-system,sans-serif;letter-spacing:-.01em;white-space:nowrap;box-shadow:0 8px 22px rgba(0,0,0,.5)}
.ch-ld .ld-tag.t1{left:-2%;top:-4%;transform:rotate(-4deg)}
.ch-ld .ld-tag.t2{right:-3%;top:45%;transform:rotate(3deg)}
.ch-ld .ld-prog{position:relative;margin-top:clamp(22px,4vh,40px);display:flex;flex-direction:column;align-items:center;gap:10px;width:min(300px,70%)}
.ch-ld .ld-bar{width:100%;height:3px;border-radius:3px;background:#2a2620;overflow:hidden}
.ch-ld .ld-bar i{display:block;width:40%;height:3px;border-radius:3px;background:#F6A801;animation:ldbar 1.6s cubic-bezier(.4,0,.2,1) infinite}
.ch-ld .ld-msg{font:400 clamp(17px,2.2vh,21px)/1 VT323,monospace;letter-spacing:.06em;color:#d8a52a;min-height:20px}
.ch-ld.ld-tap{cursor:pointer}.ch-ld.ld-tap .ld-bar i{animation:none;width:100%}.ch-ld.ld-tap .ld-msg{color:#F6A801;animation:ldpulse 1.4s ease-in-out infinite}
@keyframes ldpulse{0%,100%{opacity:1}50%{opacity:.45}}
.ch-ld .ld-foot{position:absolute;left:0;right:0;bottom:clamp(14px,3vh,32px);text-align:center;font-size:12px;font-weight:700;color:#6f675a}
@keyframes ldbar{0%{transform:translateX(-100%)}100%{transform:translateX(250%)}}
@keyframes ldglow{0%,100%{opacity:.6}50%{opacity:1}}
/* wide screens: words, logo and loading big on the left; the rig tilted in from the right */
@media (min-aspect-ratio:1/1){
.ch-ld{display:block;padding:0}
.ch-ld .ld-glow{left:44%;right:-20%;top:5%;height:90%;background:radial-gradient(50% 50% at 50% 50%,rgba(246,168,1,.22),rgba(246,168,1,0) 70%)}
.ch-ld .ld-left{position:absolute;left:7%;align-items:flex-start;top:50%;transform:translateY(-50%);width:min(620px,41vw);display:flex;flex-direction:column;align-items:flex-start;text-align:left}
.ch-ld .ld-pill{font-size:clamp(10px,1.3vh,13px)}
.ch-ld .ld-mark{margin-top:clamp(14px,2.6vh,26px);height:clamp(80px,15vh,150px)}
.ch-ld .ld-cap{font-size:clamp(10px,1.4vh,13px);padding-left:0;margin-top:8px}
.ch-ld h1{text-align:left;margin-top:clamp(18px,3.6vh,36px);font-size:clamp(30px,min(6vh,3.4vw),58px);line-height:1.06}
.ch-ld h1 span{display:block}
.ch-ld p{text-align:left;margin-top:clamp(10px,1.8vh,18px);font-size:clamp(14px,2.1vh,19px)}
.ch-ld .ld-prog{margin-top:clamp(28px,6vh,60px);align-items:flex-start;width:min(320px,80%)}
.ch-ld .ld-msg{font-size:clamp(18px,2.4vh,22px)}
.ch-ld .ld-stage{position:absolute;margin:0;left:52%;top:50%;width:min(60vw,112vh);transform:translateY(-50%) perspective(1700px) rotateY(-16deg) rotateX(5deg);transform-origin:0 50%}
.ch-ld .ld-pic{border-radius:20px;-webkit-mask-image:linear-gradient(90deg,#000 62%,transparent 100%);mask-image:linear-gradient(90deg,#000 62%,transparent 100%)}
.ch-ld .ld-tag{font-size:clamp(12px,1.7vh,16px)}
.ch-ld .ld-tag.t1{left:-3%;top:-6%}
.ch-ld .ld-tag.t2{right:auto;left:46%;top:44%}
}
@media (max-aspect-ratio:1/1){ .ch-ld .ld-stage{width:calc(100% + 4px)} .ch-ld .ld-tag.t1{left:1%;top:-8%} .ch-ld .ld-tag.t2{right:1%;top:auto;bottom:-7%} }
@media (prefers-reduced-motion:reduce){.ch-ld .ld-glow,.ch-ld .ld-bar i,.ch-ld.ld-tap .ld-msg,.ch-ld.ld-anim .ld-pic img{animation:none!important}.ch-ld .ld-bar i{width:60%}.ch-ld.ld-anim .ld-pic img:first-child{opacity:1}}
/* ---------- ch1 quick setup and phone play (switch: quicksetup) ---------- */
html.ffo-quicksetup:where(:not(.fft-quicksetup)) .qs-nav{display:none!important}
.qs-nav{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 16px;border-radius:999px;border:2px solid var(--kl,#F6A801);background:#2a2112;color:#FBF6EC;font:900 14px/1 var(--body);cursor:pointer;box-shadow:0 0 18px rgba(246,168,1,.22);white-space:nowrap}
.qs-nav svg{width:18px;height:18px;color:var(--kl,#F6A801);flex:none}
.qs-nav:hover{background:#3a2c10}
.qs-nav:focus-visible{outline:2px solid var(--kl,#F6A801);outline-offset:3px}
body.mob .qs-nav{height:34px;padding:0 12px;font-size:13px}
/* the steps: full screen on a phone held upright, a card on iPads and laptops, a side panel when playing sideways */
.qs-ov{position:fixed;inset:0;z-index:9450;display:none;color:#FBF6EC;font-family:var(--body)}
.qs-ov.open{display:block}
.qs-ov.full{background:#0b0a08;overflow:auto;-webkit-overflow-scrolling:touch}
.qs-ov.full::before{content:"";position:fixed;left:-30%;right:-30%;top:4%;height:46%;background:radial-gradient(50% 50% at 50% 50%,rgba(246,168,1,.14),rgba(246,168,1,0) 70%);pointer-events:none}
.qs-ov.card{background:rgba(5,5,5,.6);display:none;align-items:center;justify-content:center;padding:20px}
.qs-ov.card.open{display:flex}
.qs-ov.card .qs-box{position:relative;width:min(600px,100%);max-height:min(640px,calc(100vh - 40px));overflow:auto;box-sizing:border-box;padding:26px 28px 24px;border-radius:26px;background:rgba(22,20,17,.96);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.1);box-shadow:0 30px 70px rgba(0,0,0,.6)}
.qs-ov.full .qs-box{position:relative;box-sizing:border-box;min-height:100%;max-width:520px;margin:0 auto;padding:calc(28px + env(safe-area-inset-top,0px)) 22px calc(24px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column}
.qs-pg{display:flex;flex-direction:column;gap:18px;flex:1 1 auto;min-height:0}
.qs-pg.in{animation:qsin .22s cubic-bezier(.2,.7,.2,1)}
.qs-pg.back.in{animation:qsback .22s cubic-bezier(.2,.7,.2,1)}
@keyframes qsin{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
@keyframes qsback{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){ .qs-pg.in,.qs-pg.back.in{animation:none} }
.qs-grow{flex:1 1 auto}
.qs-mark{width:84px;height:40px;color:var(--kl,#F6A801);flex:none}
.qs-h{margin:0;font:italic 800 32px/1.1 'Exo 2',var(--body);letter-spacing:-.01em;color:#FBF6EC}
.qs-h span{color:var(--kl,#F6A801)}
.qs-sub{margin:4px 0 0;font-size:15px;font-weight:700;line-height:1.45;color:#cfc6b4}
.qs-note{margin:0;text-align:center;font-size:13px;font-weight:700;color:#8a8170}
.qs-lab{font-size:12px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:#8a8170}
.qs-ov button{font-family:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.qs-ov button:focus-visible{outline:2px solid var(--kl,#F6A801);outline-offset:2px}
/* header: progress, step count, Skip */
.qs-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.qs-dots{display:flex;gap:6px;flex:1 1 auto;max-width:150px}
.qs-dots i{flex:1;height:5px;border-radius:3px;background:#3a3630}
.qs-dots i.on{background:var(--kl,#F6A801)}
.qs-tr{display:flex;align-items:center;gap:10px;flex:none}
.qs-cnt{font-size:13px;font-weight:800;color:#a99f8e}
.qs-skip{height:36px;padding:0 16px;border-radius:999px;border:1px solid #3a3630;background:transparent;font:800 14px var(--body)}
.qs-x{width:36px;height:36px;border-radius:50%;border:0;background:#2c2924;font:800 18px/1 var(--body);display:grid;place-items:center;padding:0}
/* big choices */
.qs-opt{display:flex;align-items:center;gap:14px;width:100%;box-sizing:border-box;padding:16px;border-radius:18px;border:1px solid #2f2b25;background:#1a1815;text-align:left}
.qs-opt.best{border:2px solid var(--kl,#F6A801);background:linear-gradient(180deg,#2a2112,#1a1610);box-shadow:0 0 24px rgba(246,168,1,.16)}
.qs-opt .qi{display:grid;place-items:center;width:48px;height:48px;flex:none;border-radius:14px;background:#2a2620;color:var(--kl,#F6A801)}
.qs-opt.best .qi{background:var(--kl,#F6A801);color:#111}
.qs-opt .qt{display:flex;flex-direction:column;gap:3px;flex:1 1 auto;min-width:0}
.qs-opt b{font-size:17px;font-weight:900}
.qs-opt .qt span{font-size:13px;font-weight:700;color:#a99f8e;line-height:1.35}
.qs-opt.best .qt span{color:#cfc6b4}
.qs-opt em{font-style:normal;font-size:11px;font-weight:900;letter-spacing:.08em;color:var(--kl,#F6A801);flex:none}
.qs-row{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;box-sizing:border-box;height:54px;padding:0 18px;border-radius:16px;border:1px solid #2f2b25;background:#1a1815;font-weight:800;font-size:15px;text-align:left}
.qs-row span:last-child{color:#8a8170;font-weight:700;font-size:13px}
/* sound tiles */
.qs-snd{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.qs-ov.card .qs-snd,.qs-ov.side .qs-snd{grid-template-columns:repeat(4,minmax(0,1fr))}
.qs-ov.side .qs-snd{grid-template-columns:repeat(2,minmax(0,1fr))}
.qs-tile{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:4px;min-height:120px;box-sizing:border-box;padding:14px;border-radius:18px;border:1px solid #2f2b25;background:#1f1d19;text-align:left}
.qs-tile svg{width:28px;height:28px;color:#8a8170;margin-bottom:10px;flex:none}
.qs-tile b{font-size:16px;font-weight:900}
.qs-tile span{font-size:12px;font-weight:700;color:#a99f8e;line-height:1.3}
.qs-tile[aria-pressed="true"]{border:2px solid var(--kl,#F6A801);padding:13px;background:linear-gradient(180deg,#2a2112,#1a1610);box-shadow:0 0 22px rgba(246,168,1,.18)}
.qs-tile[aria-pressed="true"] svg{color:var(--kl,#F6A801)}
.qs-tile[aria-pressed="true"] span{color:#cfc6b4}
.qs-ov.side .qs-tile{min-height:84px;padding:10px 12px}
.qs-ov.side .qs-tile[aria-pressed="true"]{padding:9px 11px}
.qs-ov.side .qs-tile svg{width:22px;height:22px;margin-bottom:6px}
.qs-ov.side .qs-tile span{display:none}
.qs-chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.qs-chip{height:40px;padding:0 16px;border-radius:999px;border:1px solid #2f2b25;background:#1f1d19;color:#cfc6b4!important;font:800 14px var(--body)}
.qs-chip[aria-pressed="true"]{border:1.5px solid var(--kl,#F6A801);background:#2a2112;color:#FBF6EC!important}
.qs-grp{display:flex;flex-direction:column;gap:10px}
/* keys step */
.qs-card{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:18px;border:1px solid #2f2b25;background:#1a1815}
.qs-card .qi{display:grid;place-items:center;width:44px;height:44px;flex:none;border-radius:12px;background:#2a2620;color:var(--kl,#F6A801)}
.qs-card .qt{display:flex;flex-direction:column;gap:2px;flex:1 1 auto;min-width:0}
.qs-card b{font-size:15px;font-weight:900}
.qs-card .qt span{font-size:12px;font-weight:700;color:#a99f8e}
.qs-midi{display:flex;align-items:center;gap:8px;height:38px;padding:0 14px;border-radius:999px;border:1px solid #3a3630;background:#221f1b;font:800 13px var(--body);flex:none}
.qs-midi i{width:8px;height:8px;border-radius:50%;background:#5a5347}
.qs-midi.on i{background:#7CFC7C;box-shadow:0 0 8px #7CFC7C}
.qs-sw{display:flex;gap:12px;flex-wrap:wrap}
.qs-sw button{width:44px;height:44px;border-radius:50%;border:3px solid transparent;background:var(--c);box-shadow:inset 0 0 0 2px rgba(0,0,0,.25);padding:0}
.qs-sw button[aria-pressed="true"]{border-color:#FBF6EC;box-shadow:0 0 0 2px var(--kl,#F6A801),0 0 16px var(--c)}
.qs-seg{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:6px;padding:5px;border-radius:16px;background:#1a1815;border:1px solid #2f2b25}
.qs-seg button{height:44px;border-radius:12px;border:0;background:transparent;color:#cfc6b4!important;font:800 14px var(--body)}
.qs-seg button[aria-pressed="true"]{background:var(--kl,#F6A801);color:#111!important;font-weight:900}
.qs-tg{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;box-sizing:border-box;padding:14px 16px;border-radius:18px;border:1px solid #2f2b25;background:#1a1815;text-align:left}
.qs-tg .qt{display:flex;flex-direction:column;gap:2px}
.qs-tg b{font-size:15px;font-weight:900}
.qs-tg .qt span{font-size:12px;font-weight:700;color:#a99f8e}
.qs-tg i{position:relative;width:48px;height:28px;flex:none;border-radius:999px;background:#3a3630;transition:background .15s}
.qs-tg i::after{content:"";position:absolute;left:3px;top:3px;width:22px;height:22px;border-radius:50%;background:#FBF6EC;transition:transform .15s}
.qs-tg[aria-checked="true"] i{background:var(--kl,#F6A801)}
.qs-tg[aria-checked="true"] i::after{transform:translateX(20px)}
/* key and tempo step */
.qs-keys{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.qs-keys button{height:48px;border-radius:12px;border:1px solid #2f2b25;background:#1f1d19;font:400 24px/1 VT323,monospace;color:#FBF6EC!important;padding:0}
.qs-keys button[aria-pressed="true"]{border:2px solid var(--kl,#F6A801);background:#2a2112;color:#ffc93d!important;box-shadow:0 0 14px rgba(246,168,1,.2)}
.qs-tempo{display:grid;grid-template-columns:56px 1fr 56px;align-items:center;gap:10px}
.qs-tempo>button{height:56px;border-radius:16px;border:1px solid #2f2b25;background:#1f1d19;font:800 26px/1 var(--body);padding:0}
.qs-bpm{display:flex;align-items:baseline;justify-content:center;gap:8px;height:56px;border-radius:16px;background:radial-gradient(130% 150% at 50% 0,#3a2805 0,#1f1503 75%);box-shadow:inset 0 0 0 1px rgba(246,168,1,.25);align-items:center}
.qs-bpm b{font:400 40px/1 VT323,monospace;color:#ffc93d;text-shadow:0 0 10px rgba(255,201,61,.45)}
.qs-bpm span{font:400 18px/1 VT323,monospace;color:#d8a52a}
.qs-tap{height:46px;border-radius:14px;border:1px dashed #5a5347;background:transparent;font:800 14px var(--body)}
.qs-tap.hit{border-color:var(--kl,#F6A801);background:#2a2112}
/* bottom buttons */
.qs-nav2{display:flex;gap:10px}
.qs-back{width:110px;height:54px;flex:none;border-radius:16px;border:1px solid #3a3630;background:transparent;color:#cfc6b4!important;font:800 16px var(--body)}
.qs-go{flex:1 1 auto;height:54px;border-radius:16px;border:0;background:var(--kl,#F6A801);color:#111!important;font:900 17px var(--body)}
.qs-go:hover{filter:brightness(1.06)}
.qs-hint{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:12px;font-size:13px;font-weight:700;color:#8a8170;text-align:center}
.qs-hint svg{width:16px;height:16px;flex:none}
/* flip and welcome back */
.qs-flip{display:flex;justify-content:center;padding:18px 0 4px}
.qs-ph{width:74px;height:132px;border-radius:16px;border:4px solid #FBF6EC;box-sizing:border-box;display:flex;align-items:flex-end;gap:2px;padding:6px;animation:qsturn 3.2s cubic-bezier(.65,0,.35,1) infinite}
.qs-ph.sm{width:44px;height:78px;border-width:3px;border-radius:10px;padding:4px;gap:1px;flex:none}
.qs-ph i{flex:1;height:40%;border-radius:0 0 3px 3px;background:#FBF6EC}
.qs-ph i:nth-child(odd){background:var(--kl,#F6A801)}
@keyframes qsturn{0%,18%{transform:rotate(0)}45%,80%{transform:rotate(-90deg)}100%{transform:rotate(0)}}
@media (prefers-reduced-motion:reduce){ .qs-ph{animation:none} }
.qs-sum{display:flex;flex-direction:column;gap:8px}
.qs-sum>div{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;border-radius:14px;background:#1a1815;border:1px solid #2f2b25}
.qs-sum span{font-size:12px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:#8a8170;flex:none}
.qs-sum b{font-size:14px;font-weight:800;text-align:right}
.qs-link{display:block;width:100%;height:50px;border-radius:14px;border:1px solid #3a3630;background:transparent;font:800 14px var(--body);color:#FBF6EC!important}
.qs-wb{display:flex;align-items:center;gap:16px;padding:16px;border-radius:18px;background:#1a1815;border:1px solid #2f2b25}
.qs-wb .qt{display:flex;flex-direction:column;gap:6px;min-width:0}
.qs-wb b{font-size:15px;font-weight:900}
.qs-wb .qt span{font-size:13px;font-weight:700;color:#a99f8e}
.qs-wb .qt em{font:400 20px/1 VT323,monospace;font-style:normal;color:#ffc93d}
.qs-kick{font-size:14px;font-weight:800;color:var(--kl,#F6A801)}
/* side panel while playing sideways */
.qs-ov.side{background:rgba(0,0,0,.35)}
.qs-ov.side .qs-box{position:absolute;top:0;right:0;bottom:0;width:min(380px,92vw);box-sizing:border-box;overflow:auto;padding:calc(14px + env(safe-area-inset-top,0px)) calc(16px + env(safe-area-inset-right,0px)) 14px 18px;display:flex;flex-direction:column;background:rgba(22,20,17,.95);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-left:1px solid rgba(255,255,255,.1);box-shadow:-20px 0 40px rgba(0,0,0,.5);animation:qsside .22s cubic-bezier(.2,.7,.2,1)}
@keyframes qsside{from{transform:translateX(40px);opacity:0}to{transform:none;opacity:1}}
.qs-ov.side .qs-pg{gap:12px}
.qs-ov.side .qs-h{font-size:22px}
.qs-ov.side .qs-sub{display:none}
.qs-ov.side .qs-keys{grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
.qs-ov.side .qs-keys button{height:40px;font-size:21px}
.qs-ov.side .qs-go,.qs-ov.side .qs-back{height:46px;font-size:15px}
.qs-ov.side .qs-tempo>button,.qs-ov.side .qs-bpm{height:48px}
.qs-boxes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.qs-boxes button{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0;padding:10px 12px;border-radius:12px;border:1px solid #2f2b25;background:#1f1d19;text-align:left}
.qs-boxes span{font-size:11px;font-weight:900;letter-spacing:.1em;color:#8a8170}
.qs-boxes b{font-size:14px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.qs-boxes b.qs-lcd{font:400 21px/1 VT323,monospace;color:#ffc93d}
.qs-pri{display:flex;align-items:center;justify-content:center;width:100%;height:46px;border-radius:14px;border:0;background:var(--kl,#F6A801);color:#111!important;font:900 14px var(--body)}
/* playing sideways on a phone: just the keys, edge to edge, and a slim bar on top */
html.ph-land,html.ph-land body{overflow:hidden!important;overscroll-behavior:none}
.qs-play{display:none}
html.ph-land .qs-play{display:block;position:fixed;inset:0;z-index:9400;background:#0b0a08}
.qb{position:fixed;left:0;right:0;top:0;z-index:9420;display:none;align-items:center;gap:8px;height:calc(50px + env(safe-area-inset-top,0px));box-sizing:border-box;padding:env(safe-area-inset-top,0px) calc(10px + env(safe-area-inset-right,0px)) 0 calc(12px + env(safe-area-inset-left,0px));background:#0b0a08;color:#FBF6EC;font-family:var(--body)}
html.ph-land .qb{display:flex}
.qb .qs-mark{width:52px;height:25px}
.qb button{height:36px;border-radius:10px;border:1px solid #2f2b25;background:#1a1815;color:#FBF6EC;font:900 13px/1 var(--body);padding:0 12px;cursor:pointer;flex:none;-webkit-tap-highlight-color:transparent}
.qb-lcd{flex:1 1 auto;min-width:0;height:38px;display:flex;align-items:center;gap:10px;padding:0 12px;border-radius:10px;background:radial-gradient(130% 150% at 50% 0,#3a2805 0,#1f1503 75%);box-shadow:inset 0 0 0 1px rgba(246,168,1,.22);overflow:hidden}
.qb-lcd b{font:400 28px/1 VT323,monospace;color:#ffc93d;text-shadow:0 0 10px rgba(255,201,61,.45);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.qb-lcd i{font:400 18px/1 VT323,monospace;font-style:normal;color:#f7d27a;padding:2px 6px;border:1px solid rgba(255,201,61,.45);border-radius:5px;white-space:nowrap}
.qb-lcd i:empty{display:none}
.qb-lcd span{margin-left:auto;font:400 17px/1 VT323,monospace;color:#d8a52a;white-space:nowrap}
.qb .qb-snd{max-width:30vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qb .qb-sus[aria-pressed="true"]{border-color:#F6A801;background:#2a2112;color:#ffc93d;box-shadow:0 0 12px rgba(246,168,1,.3)}
.qb .qb-rec{width:40px;padding:0;display:grid;place-items:center}
.qb .qb-rec span{width:14px;height:14px;border-radius:50%;background:#e5383b}
.qb .qb-rec[aria-pressed="true"]{border-color:#e5383b;background:#2a1212}
.qb .qb-rec[aria-pressed="true"] span{border-radius:3px;animation:qbrec 1s ease-in-out infinite}
@keyframes qbrec{50%{opacity:.4}}
.qb .qb-set{width:44px;padding:0;display:grid;place-items:center;border:2px solid #F6A801;background:#2a2112;color:#F6A801}
.qb .qb-set svg{width:20px;height:20px}
html.ph-land body.solo .kb-scroll{position:fixed!important;z-index:9410!important;top:calc(52px + env(safe-area-inset-top,0px))!important;left:env(safe-area-inset-left,0px)!important;right:env(safe-area-inset-right,0px)!important;bottom:0!important;width:auto!important;height:auto!important;margin:0!important;padding:0 4px 4px!important;transform:none!important;overflow-x:auto!important;overflow-y:hidden!important;background:#0b0a08;border-radius:0!important}
html.ph-land body.solo #kb{height:100%!important;min-height:0!important;min-width:0!important;width:100%!important;margin:0!important}
html.ph-land .kb-wrap,html.ph-land .hero,html.ph-land .wrap:has(.kb-scroll),html.ph-land main{transform:none!important;filter:none!important;contain:none!important;will-change:auto!important;z-index:auto!important;isolation:auto!important}
/* Keys only (minimal): one bar in the order you reach for things. Practise (Learn, Song, Record, Studio) | play (Key, Transpose,
Octave, Metronome, Loop, Trail) | sound and look (Mix, Look, Settings) ... Undo, Redo, Feedback, Power */
html body.solo.psz-keys:not(.mob) .kt-dock>.kt-ic[data-k="key"]{order:1}
html body.solo.psz-keys:not(.mob) .kt-dock>.kt-ic[data-k="tr"]{order:2}
html body.solo.psz-keys:not(.mob) .kt-dock>.kt-ic[data-k="oc"]{order:3}
html body.solo.psz-keys:not(.mob) .kt-dock>.kt-ic[data-k="metro"]{order:4}
html body.solo.psz-keys:not(.mob) .kt-dock>#looper{order:5}
html body.solo.psz-keys:not(.mob) .kt-dock>#ctrTg{order:6}
html body.solo.psz-keys:not(.mob) .kt-dock>#eqWrap{order:7;margin-left:10px!important}
html body.solo.psz-keys:not(.mob) .kt-dock>.kl-wrap{order:8}
html body.solo.psz-keys:not(.mob) .kt-dock>.adv-wrap{order:9}
html body.solo.psz-keys:not(.mob) .kt-dock>:is(.kt-pop,.kt-hold){order:20}
html body.solo.psz-keys:not(.mob) .kb-switches>#avFb{order:199!important}
html body.solo.psz-keys:not(.mob) .kb-switches>#avUndo{margin-left:12px!important}
html body.solo:not(.mob) .kb-switches>.kt-dock.kt-dock2{order:201!important;border-left:0!important;padding:0!important;margin:0 0 0 6px!important}
html body.solo:not(.mob) .kb-switches>#midiBtn{order:200!important}
html body.solo:not(.mob) .kb-switches>#avMe{order:202!important}
/* close buttons: one size (32 px round) everywhere, centred on the card's title line, the same distance from the edge */
.av-h>.av-x{grid-row:1!important;align-self:center;width:32px!important;height:32px!important;display:grid;place-items:center;padding:0;font-size:20px;line-height:1}
.av-h>.av-more{grid-row:1!important;align-self:center}
.pn-cx{grid-row:1!important;align-self:center;width:32px!important;height:32px!important;display:grid;place-items:center;padding:0;font-size:18px}
.fb-x{width:32px!important;height:32px!important;display:grid;place-items:center;padding:0;font-size:20px}
.kla-h>.kla-x{margin-top:-5px}
.hc-x{width:32px!important;height:32px!important;top:19px!important;right:16px!important;display:grid;place-items:center;padding:0;font-size:20px!important}
/* phones: Setup is a round icon like the tuner beside it, both a little smaller, so chordhouse.app sits dead centre with room either side */
@media (max-width:620px){body.solo .qs-nav{width:40px!important;height:40px!important;padding:0!important;justify-content:center;gap:0}body.solo .qs-nav>span{display:none}
body.solo .nav-r .nav-metro{width:40px;height:40px;flex-basis:40px}body.solo .nav-r{gap:8px}}
@media (max-width:400px){body.solo .solo-title .cha{font-size:20px}}
@media (min-width:521px) and (max-width:1000px){body.solo .solo-title .cha{font-size:24px}}
/* phones: Setup lives in More (first tile under Your rig), so the header is just the logo, chordhouse.app in the centre and the tuner */
body.solo.mob .nav .qs-nav{display:none!important}
/* tablets: a slimmer Book button so the title can keep the centre */
@media (min-width:700px) and (max-width:1000px){body.solo:not(.mob) .nav-r .btn-yellow{padding:0 14px;font-size:13.5px}body.solo:not(.mob) .nav-r{gap:6px}body.solo:not(.mob) .nav-r .nav-metro,body.solo:not(.mob) .qs-nav{width:40px!important;height:40px!important;flex-basis:40px}}
.qs-x{width:32px!important;height:32px!important}
.pn-cx{transform:translateY(-3px)}
body.mob .hc-x{top:14px!important}
/* Paddle checkout button on the founding card */
.pg-pdn{margin:8px 0 0;font:700 12.5px/1.4 var(--body);color:#a99f8e;text-align:center}
.pg-pdl2{width:100%;margin-top:10px;height:46px;border-radius:999px;border:1.5px solid rgba(246,168,1,.55);background:transparent;color:#FBF6EC;font:800 14.5px/1 var(--body);cursor:pointer}
.pg-pdl2:hover{background:rgba(246,168,1,.1)}
/* plan checkout card */
.pl-card{position:relative}
/* Make a video */
html.ffo-reel:where(:not(.fft-reel)) .rl-btn{display:none!important}
body.rl-win .rl-gate{background:#0b0a09}
/* add-on card (ch1 Learn) */
.ad-gate .ad-pts{list-style:none;margin:4px auto 14px;padding:0;max-width:340px;text-align:left;display:flex;flex-direction:column;gap:8px}.ad-gate .ad-pts li{position:relative;padding-left:26px;font:700 14px/1.4 var(--body);color:#3a352d}.ad-gate .ad-pts li::before{content:'';position:absolute;left:4px;top:5px;width:10px;height:6px;border-left:2.5px solid #d08c00;border-bottom:2.5px solid #d08c00;transform:rotate(-45deg)}
.ad-gate .ad-inc{margin:-4px 0 14px;font:700 12.5px/1.4 var(--body);color:#6f685c}.ad-gate .ad-soon{margin-top:6px;color:#8a5a00;font-weight:800}
.rl-gate{position:fixed;inset:0;z-index:9000;display:flex;gap:28px;align-items:center;justify-content:center;padding:24px;box-sizing:border-box;background:rgba(8,7,6,.94);backdrop-filter:blur(6px)}
.rl-stage{position:relative;height:min(88vh,calc((100vw - 460px) * 16 / 9));aspect-ratio:9/16;flex:none}
.rl-cv{display:block;width:100%;height:100%;border-radius:22px;box-shadow:0 30px 70px rgba(0,0,0,.6);touch-action:none;background:#0b0a09}
.rl-count[hidden]{display:none!important}
.rl-relay{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:9500;padding:10px 16px;border-radius:12px;background:#151310;border:1px solid #F6A801;color:#e8e0cf;font:700 13px/1.4 var(--body);box-shadow:0 12px 30px rgba(0,0,0,.5)}.rl-relay b{color:#FFC93D}
/* iPhone and iPad only let a page make sound after a tap: until then, one big button on the video */
.rl-snd{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:10px;padding:22px 30px;border:0;border-radius:22px;background:rgba(17,17,17,.82);color:#FBF6EC;font:800 16px/1.2 var(--body);cursor:pointer;box-shadow:0 20px 50px rgba(0,0,0,.6);backdrop-filter:blur(6px)}
.rl-snd b{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:#F6A801;color:#111;font-size:26px;padding-left:4px;box-sizing:border-box}.rl-snd[hidden]{display:none}
.rl-count{position:absolute;inset:0;display:grid;place-items:center;font:700 140px/1 var(--display);color:#FFC93D;text-shadow:0 0 40px rgba(0,0,0,.7);pointer-events:none}
.rl-recdot{position:absolute;top:14px;left:14px;display:none;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;background:rgba(0,0,0,.6);color:#fff;font:800 14px/1 var(--body)}
.rl-recdot i{width:10px;height:10px;border-radius:50%;background:#ff4d3d;animation:rlb 1s steps(2) infinite}@keyframes rlb{50%{opacity:.2}}
.rl-rec .rl-recdot{display:flex}
.rl-credit{position:absolute;left:0;right:0;bottom:-26px;margin:0;text-align:center;font:600 12px/1.3 var(--body);color:#8a8170}
.rl-side{width:380px;max-height:88vh;overflow:auto;display:flex;flex-direction:column;gap:12px;color:#FBF6EC;font-family:var(--body)}
.rl-h{display:flex;align-items:center;justify-content:space-between}.rl-h b{font:700 26px/1.1 var(--display);color:#FFC93D}
.rl-x{position:static!important}
.rl-lead{margin:0;font:600 14px/1.45 var(--body);color:#cfc6b4}
.rl-tabs{display:flex;gap:4px;padding:4px;border-radius:999px;background:#151310;border:1px solid #2e2a22}
.rl-tabs button{flex:1;height:36px;border:0;border-radius:999px;background:transparent;color:#cfc6b4;font:800 13.5px/1 var(--body);cursor:pointer}.rl-tabs button[aria-selected="true"]{background:#F6A801;color:#111}
.rl-find{display:flex;gap:6px}.rl-q{flex:1;min-width:0;height:42px;border-radius:12px;border:1px solid #3a3630;background:#141311;color:#FBF6EC;font:700 14px/1 var(--body);padding:0 12px}
.rl-find button{flex:none;height:42px;padding:0 16px;border-radius:12px;border:0;background:#F6A801;color:#111;font:900 14px/1 var(--body);cursor:pointer}
.rl-ideas{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.rl-ideas button{height:30px;padding:0 11px;border-radius:999px;border:1px solid #3a3630;background:transparent;color:#cfc6b4;font:700 12.5px/1 var(--body);cursor:pointer}.rl-ideas button:hover{border-color:#F6A801;color:#FBF6EC}
.rl-res{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:10px}
.rl-res .rl-more,.rl-res .rl-end{grid-column:1/-1;justify-self:center;margin-top:6px}.rl-res .rl-more{min-width:160px}
.rl-clip{position:relative;aspect-ratio:9/16;border-radius:10px;overflow:hidden;border:2px solid transparent;padding:0;background:#1a1816;cursor:pointer}.rl-clip img{width:100%;height:100%;object-fit:cover;display:block}
.rl-clip i{position:absolute;right:4px;bottom:4px;padding:2px 5px;border-radius:6px;background:rgba(0,0,0,.6);color:#fff;font:800 10px/1 var(--body);font-style:normal}.rl-clip.on{border-color:#F6A801}
.rl-looks{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.rl-looks button{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px;border-radius:12px;border:1px solid #2e2a22;background:#151310;color:#cfc6b4;font:800 12px/1 var(--body);cursor:pointer}.rl-looks button.on{border-color:#F6A801;color:#FBF6EC}
.rl-sw{display:block;width:100%;aspect-ratio:9/12;border-radius:8px}
.rl-sw-glow{background:radial-gradient(circle at 50% 40%,rgba(246,168,1,.7),#0d0b08 70%)}.rl-sw-night{background:linear-gradient(#05070f,#141a2e)}.rl-sw-aurora{background:linear-gradient(#04110f,rgba(46,214,160,.5),rgba(80,140,255,.4),#04110f)}.rl-sw-ink{background:radial-gradient(circle at 30% 40%,rgba(246,168,1,.35),#0b0a09 60%)}.rl-sw-black{background:#0b0a09;border:1px solid #2e2a22}
.rl-file{display:flex;align-items:center;justify-content:center;height:52px;border-radius:12px;border:1.5px dashed #5a400a;color:#FFC93D;font:800 14px/1 var(--body);cursor:pointer}
.rl-note{margin:6px 0 0;font:600 12.5px/1.45 var(--body);color:#8a8170}
.rl-opts{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:12px;border-radius:14px;background:#151310;border:1px solid #2e2a22}
.rl-opts label{display:flex;align-items:center;gap:6px;font:800 13px/1 var(--body);color:#cfc6b4}.rl-opts input[type=checkbox]{accent-color:#F6A801;width:16px;height:16px}
.rl-dim{flex:1 1 100%}.rl-dim input{flex:1;accent-color:#F6A801}
.rl-title{flex:1 1 100%;height:38px;border-radius:10px;border:1px solid #3a3630;background:#141311;color:#FBF6EC;font:700 13.5px/1 var(--body);padding:0 12px}
/* ---------- ch1 Learn: courses (switch: courses) ---------- */
html.ffo-courses:not(.fft-courses) .cl-btn,html.ffo-courses .cl-card,html.ffo-courses .lx,html.ffo-courses:not(.fft-courses) .mob-dock [data-md="learn"]{display:none!important}
/* Learn not unlocked yet (an add-on): a small lock, and the button opens the add-on card */
html.ffo-courses.fft-courses #avCourses{position:relative}html.ffo-courses.fft-courses #avCourses::after{content:'';width:11px;height:11px;margin-left:2px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3' fill='none' stroke='%23000' stroke-width='2.6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3' fill='none' stroke='%23000' stroke-width='2.6'/%3E%3C/svg%3E") center/contain no-repeat;opacity:.8}
body.solo .kb-switches #avCourses{order:7;display:inline-flex;align-items:center;gap:6px}body.rg .kb-switches #avCourses{order:4!important}
body.solo.mob .kb-switches #avCourses{display:none!important}
.cl-kick{display:block;font:900 11px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:#F6A801}
.cl-back{border:0;background:none;color:#a99f8e;font:800 13px/1 var(--body);padding:0 0 10px;cursor:pointer}.cl-back:hover{color:#FBF6EC}
.cl-stats{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:18px 0 6px}.cl-stats>span{height:36px;display:inline-flex;align-items:center;gap:6px;padding:0 14px;border-radius:999px;background:#1d1a16;border:1px solid #2e2a22;font:700 13px/1 var(--body);color:#b9b09e}.cl-stats b{color:#FFC93D;font-size:15px}
.cl-go{margin-left:auto}
.cl-th{margin:24px 0 10px;font:700 18px/1.2 var(--display);color:#FBF6EC}.cl-th small{margin-left:8px;font:700 13px var(--body);color:#8a8170}
.cl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.cl-course{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-height:150px;padding:14px;border-radius:16px;border:1px solid #2e2a22;background:#1b1916;color:#FBF6EC;text-align:left;cursor:pointer;font-family:var(--body)}
.cl-course:hover:not(.soon){border-color:#F6A801}.cl-course b{font:800 16px/1.25 var(--body)}.cl-course small{font:600 12.5px/1.4 var(--body);color:#a99f8e}
.cl-cl{font:900 10px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:#d8a52a}
.cl-meta{display:flex;gap:10px;margin-top:auto;font:700 12px/1 var(--body);color:#a99f8e}
.cl-bar{display:block;width:100%;height:4px;border-radius:4px;background:#2a2620;overflow:hidden}.cl-bar i{display:block;height:100%;background:#F6A801}
.cl-course.soon{cursor:default;opacity:.8}.cl-course.soon b{color:#cfc6b4}.cl-course.soon .cl-cl{color:#8a8170}
.cl-ed{margin:18px 0 0;font:700 11px/1 var(--body);color:#5a554c;text-align:right}
.cl-lessons{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.cl-lessons button{width:100%;display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:14px;border:1px solid #2e2a22;background:#1b1916;color:#FBF6EC;text-align:left;cursor:pointer;font-family:var(--body)}.cl-lessons button:hover{border-color:#F6A801}
.cl-n{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:#F6A801;color:#111;font:800 13px/1 var(--body)}
.cl-lt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}.cl-lt b{font:800 15px/1.2 var(--body)}.cl-lt small{font:600 12px var(--body);color:#8a8170}
.cl-start{font:900 12.5px/1 var(--body);color:#F6A801}
.cl-stars{display:inline-flex;gap:2px;font-size:17px;line-height:1}.cl-stars i{font-style:normal;color:#3a3630}.cl-stars i.on{color:#FFC93D}
/* the lesson card over the rig */
.cl-card{position:fixed;z-index:8500;top:84px;right:20px;width:min(380px,calc(100vw - 32px));box-sizing:border-box;padding:16px 18px;border-radius:20px;background:#151310;border:1.5px solid #F6A801;box-shadow:0 24px 60px rgba(0,0,0,.6);color:#FBF6EC;font-family:var(--body)}
.cl-ch{display:flex;justify-content:space-between;align-items:center;gap:10px}.cl-ch .pl-x{position:static!important;width:30px;height:30px}
.cl-card h3{margin:6px 0 10px;font:700 21px/1.15 var(--display)}
.cl-dots{display:flex;gap:4px;margin-bottom:12px}.cl-dots i{flex:1;height:4px;border-radius:4px;background:#2e2a22}.cl-dots i.done{background:#8a6a1a}.cl-dots i.on{background:#F6A801}
.cl-lab{display:inline-block;margin-bottom:6px;padding:4px 9px;border-radius:999px;background:#2a1d04;color:#FFC93D;font:900 10.5px/1 var(--body);letter-spacing:.12em;text-transform:uppercase}
.cl-body p{margin:0 0 10px;font:600 15px/1.5 var(--body);color:#e8e0cf}
.cl-song{display:block;font:800 17px/1.25 var(--body)}.cl-cred{display:block;margin:2px 0 8px;font:600 12px var(--body);color:#8a8170}
.cl-prog{height:6px;border-radius:6px;background:#2a2620;overflow:hidden;margin:0 0 8px}.cl-prog i{display:block;height:100%;width:0;background:#F6A801;transition:width .15s}
.cl-say{min-height:1.2em;margin:0 0 6px!important;font:800 13.5px/1.3 var(--body)!important;color:#a99f8e!important}.cl-say.ok{color:#7ddc9a!important}.cl-say.no{color:#ff9d8a!important}
.cl-act{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}.cl-act .btn{height:40px;padding:0 18px;font-size:14px}
.cl-ghost{height:40px;padding:0 14px;border-radius:999px;border:1px solid #3a3630;background:transparent;color:#cfc6b4;font:800 13.5px/1 var(--body);cursor:pointer}.cl-ghost:hover{border-color:#F6A801;color:#FBF6EC}
.cl-fin{text-align:center;padding:4px 0 6px}.cl-fin .cl-stars{font-size:34px;gap:6px}.cl-fin b{display:block;margin:8px 0 4px;font:700 22px/1.2 var(--display);color:#FFC93D}
/* keys to play, keys played right, a slip */
#kb .kw.cl-on{background:linear-gradient(180deg,#fff6dc,#ffd66e)!important;box-shadow:inset 0 -6px 0 #F6A801,0 0 18px rgba(246,168,1,.55)!important}
#kb .kb-black.cl-on{background:linear-gradient(180deg,#b88000,#F6A801)!important;box-shadow:0 0 16px rgba(246,168,1,.6)!important}
#kb .kw.cl-ok,#kb .kb-black.cl-ok{background:linear-gradient(180deg,#d6ffe3,#7ddc9a)!important}
#kb .kw.cl-bad,#kb .kb-black.cl-bad{background:linear-gradient(180deg,#ffd8d0,#ff8a7a)!important}
@media (max-width:620px){.cl-card{top:calc(12px + env(safe-area-inset-top,0px));bottom:auto;right:12px;left:12px;width:auto;max-height:36vh;overflow:auto;padding:12px 14px}.cl-card h3{font-size:18px;margin-bottom:8px}.cl-go{margin-left:0}}
/* the Learn page */
.lx{position:fixed;inset:0;z-index:9000;overflow:auto;background:radial-gradient(1200px 500px at 50% -10%,#2a1f08 0%,rgba(15,14,12,0) 60%),#0f0e0c;color:#FBF6EC;font-family:var(--body);-webkit-overflow-scrolling:touch}
.lx-say{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:9600;display:flex;align-items:center;gap:12px;max-width:calc(100vw - 32px);box-sizing:border-box;padding:12px 12px 12px 16px;border-radius:14px;background:#1b1a17;border:1px solid #3a3630;border-top:3px solid #F6A801;box-shadow:0 18px 50px rgba(0,0,0,.6);color:#FBF6EC;font-weight:700;font-size:14px;line-height:1.4}
.lx-say button{flex:none;width:28px;height:28px;border:0;border-radius:50%;background:#2a2824;color:#cfc6b4;font-size:18px;line-height:1;cursor:pointer}
.lx-in{width:min(1040px,100%);margin:0 auto;padding:calc(48px + env(safe-area-inset-top,0px)) 24px 48px;box-sizing:border-box}
.lx-top{display:flex;align-items:center;justify-content:space-between;gap:16px}.lx-id{display:flex;align-items:center;gap:14px;min-width:0}
.lx-av{flex:none;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:#F6A801;color:#111;font:700 22px/1 var(--display);box-shadow:0 0 0 3px #111,0 0 0 5px #F6A801}
.lx-av.sm{width:38px;height:38px;font-size:16px;box-shadow:none}
.lx-hi{margin:6px 0 0;font:700 30px/1.1 var(--display);color:#FBF6EC;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lx-x{position:static!important;flex:none}
.lx-tabs{position:sticky;top:10px;z-index:3;box-shadow:0 8px 24px rgba(0,0,0,.45);display:flex;gap:6px;margin:20px 0 22px;padding:5px;border-radius:999px;background:#191714;border:1px solid #2e2a22;width:max-content;max-width:100%;overflow-x:auto;scrollbar-width:none}
.lx-tabs::-webkit-scrollbar{display:none}
.lx-tabs button{flex:none;height:38px;padding:0 20px;border:0;border-radius:999px;background:transparent;color:#b9b09e;font:800 14px/1 var(--body);cursor:pointer}
.lx-tabs button:hover{color:#FBF6EC}.lx-tabs button[aria-selected="true"]{background:#F6A801;color:#111}
.lx-h{display:flex;align-items:center;gap:12px;margin:0 0 4px;font:700 22px/1.2 var(--display);color:#FBF6EC}.lx-sub{margin:0 0 16px;font:600 14px/1.45 var(--body);color:#a99f8e;max-width:640px}
.lx-nudge{display:flex;align-items:center;gap:14px;width:100%;margin:0 0 6px;padding:14px 18px;border-radius:16px;border:1px dashed #F6A801;background:#1f1806;color:#FBF6EC;text-align:left;cursor:pointer;font-family:var(--body)}
.lx-nudge b{flex:none;font:800 15px/1.2 var(--body);color:#FFC93D}.lx-nudge span{flex:1;font:600 13px/1.4 var(--body);color:#cfc6b4}.lx-nudge i{font-style:normal;font-size:24px;color:#F6A801}
.lx-kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.lx-kpis.s4{grid-template-columns:repeat(4,1fr);margin-bottom:16px}
.lx-kpi{display:flex;flex-direction:column;justify-content:center;gap:4px;min-height:96px;padding:14px 16px;border-radius:16px;background:#1b1916;border:1px solid #2e2a22;box-sizing:border-box}
.lx-kpi>b{font:700 30px/1 var(--display);color:#FFC93D}.lx-kpi>span{font:800 13px/1.2 var(--body);color:#e8e0cf}.lx-kpi small{font:700 11.5px/1.2 var(--body);color:#8a8170}
.lx-wk{flex-direction:row;align-items:center;justify-content:flex-start;gap:12px}.lx-ring{flex:none}.lx-wkt{display:flex;flex-direction:column;gap:3px}.lx-wkt b{font:700 24px/1 var(--display);color:#FFC93D}.lx-wkt b em{font-style:normal;font-size:15px;color:#8a8170}.lx-wkt span{font:800 13px/1.2 var(--body);color:#e8e0cf}
.lx-sec{margin-top:22px}.lx-sec h3{margin:0 0 10px;font:700 17px/1.2 var(--display);color:#FBF6EC}.lx-sec h3 small{margin-left:6px;font:700 12.5px var(--body);color:#8a8170}
.lx-bars{display:grid;grid-template-columns:repeat(14,1fr);gap:6px;align-items:end;height:140px;padding:14px 14px 10px;border-radius:16px;background:#1b1916;border:1px solid #2e2a22;box-sizing:border-box}
.lx-bar{display:flex;flex-direction:column;align-items:center;gap:6px;height:100%}.lx-bv{flex:1;width:100%;max-width:26px;display:flex;align-items:flex-end;border-radius:6px;background:#221f1a;overflow:hidden}
.lx-bv i{display:block;width:100%;background:linear-gradient(180deg,#FFC93D,#F6A801);border-radius:6px}.lx-bar small{font:800 10.5px/1 var(--body);color:#6f685c}.lx-bar.now small{color:#F6A801}
.lx-crs{display:flex;flex-direction:column;gap:8px}
.lx-cr{border-radius:14px;border:1px solid #2e2a22;background:#1b1916;overflow:hidden}.lx-cr.open{border-color:#4a3a14}
.lx-cr>button{width:100%;display:flex;align-items:center;gap:16px;padding:12px 16px;border:0;background:none;color:#FBF6EC;text-align:left;cursor:pointer;font-family:var(--body)}
.lx-crn{flex:0 0 38%;display:flex;flex-direction:column;gap:4px;min-width:0}.lx-crn b{font:800 15px/1.2 var(--body)}
.lx-crb{flex:1;display:flex;flex-direction:column;gap:6px;min-width:0}.lx-crb small{font:700 12px/1 var(--body);color:#8a8170}.lx-crb .cl-bar{height:6px}
.lx-chev{flex:none;font-style:normal;font-size:22px;line-height:1;color:#6f685c;transition:transform .15s}[aria-expanded="true"]>.lx-chev{transform:rotate(90deg);color:#F6A801}
.lx-ll{list-style:none;margin:0;padding:0 16px 12px;display:flex;flex-direction:column;gap:6px}
.lx-ll li{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:10px;background:#151310}.cl-n.sm{width:30px;height:30px;font-size:11px}
.lx-lt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;font:700 14px/1.25 var(--body)}.lx-lt small,.lx-not{font:700 11.5px/1 var(--body);color:#8a8170}
.lx-two{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.lx-bdg{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.lx-b{display:flex;flex-direction:column;align-items:center;text-align:center;gap:5px;padding:12px 6px;border-radius:14px;background:#171512;border:1px solid #26231e;opacity:.5}
.lx-b span{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#26231e;color:#6f685c}.lx-b b{font:800 12px/1.2 var(--body);color:#cfc6b4}.lx-b small{font:600 10.5px/1.25 var(--body);color:#8a8170}
.lx-b.got{opacity:1;background:#1f1806;border-color:#4a3a14}.lx-b.got span{background:#F6A801;color:#111}.lx-b.got b{color:#FFC93D}
.lx-rec{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}.lx-rec li{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;background:#1b1916;border:1px solid #2e2a22}
.lx-rt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}.lx-rt b{font:800 14px/1.2 var(--body)}.lx-rt small{font:700 11.5px/1.3 var(--body);color:#8a8170}
.lx-empty{margin:0;padding:18px;border-radius:14px;background:#1b1916;border:1px dashed #2e2a22;font:700 14px/1.5 var(--body);color:#a99f8e;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.lx-saved{font:800 12px/1 var(--body);color:#7ddc9a;opacity:0;transition:opacity .2s}.lx-saved.on{opacity:1}
.lx-form{display:grid;grid-template-columns:1fr 1fr;gap:16px 22px;padding:20px;border-radius:18px;background:#1b1916;border:1px solid #2e2a22}
.lx-f{display:flex;flex-direction:column;gap:8px;min-width:0}.lx-f.wide{grid-column:1/-1}.lx-f>span{font:900 11px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:#d8a52a}
.lx-f input{height:44px;border-radius:12px;border:1px solid #3a3630;background:#141311;color:#FBF6EC;font:700 15px/1 var(--body);padding:0 14px;box-sizing:border-box;width:100%}.lx-f input:focus{outline:none;border-color:#F6A801}
.lx-f.lx-tg{flex-direction:row;align-items:center;justify-content:space-between}
.lx-seg{display:flex;flex-wrap:wrap;gap:6px}.lx-seg button{height:38px;padding:0 14px;border-radius:999px;border:1px solid #3a3630;background:#141311;color:#cfc6b4;font:800 13px/1 var(--body);cursor:pointer}
.lx-seg button:hover{border-color:#F6A801}.lx-seg button[aria-checked="true"]{background:#F6A801;border-color:#F6A801;color:#111}
.lx-acct{display:flex;flex-direction:column;gap:4px;margin-top:14px;padding:14px 18px;border-radius:14px;background:#151310;border:1px solid #26231e;font:700 14px/1.4 var(--body);color:#e8e0cf}.lx-acct small{font:600 12.5px/1.4 var(--body);color:#8a8170}
.lx-tools{display:flex;gap:10px;align-items:center;margin-bottom:12px}.lx-tools input{flex:1;height:42px;border-radius:12px;border:1px solid #3a3630;background:#141311;color:#FBF6EC;font:700 14px/1 var(--body);padding:0 14px}
.lx-rl{height:32px;font-size:12.5px}
.lx-sts{display:flex;flex-direction:column;gap:8px}.lx-st{border-radius:16px;border:1px solid #2e2a22;background:#1b1916;overflow:hidden}.lx-st.open{border-color:#4a3a14}
.lx-sth{width:100%;display:flex;align-items:center;gap:14px;padding:12px 16px;border:0;background:none;color:#FBF6EC;text-align:left;cursor:pointer;font-family:var(--body)}
.lx-stn{flex:0 0 24%;min-width:0;display:flex;flex-direction:column;gap:3px}.lx-stn b{font:800 15px/1.2 var(--body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lx-stn small{font:600 12px/1.2 var(--body);color:#8a8170;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lx-uv{font-style:normal;margin-left:4px;padding:2px 6px;border-radius:6px;background:#2a2620;color:#a99f8e;font:800 10px/1 var(--body);vertical-align:2px}
.lx-stm{flex:1;min-width:0}.lx-stm small{font:700 12.5px/1.3 var(--body);color:#b9b09e}
.lx-stk{display:flex;gap:16px}.lx-stk>span{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:44px}.lx-stk b{font:700 17px/1 var(--display);color:#FFC93D}.lx-stk small{font:700 10.5px/1 var(--body);color:#8a8170}.lx-stk .lx-last{min-width:72px}.lx-stk .lx-last b{font:800 12.5px/1.1 var(--body);color:#e8e0cf}
.lx-std{padding:4px 16px 18px;border-top:1px solid #26231e}.lx-goal{display:flex;flex-wrap:wrap;gap:8px 22px;margin:12px 0 4px}.lx-goal span{display:flex;flex-direction:column;gap:3px;font:700 13.5px/1.35 var(--body);color:#e8e0cf}.lx-goal b{font:900 10.5px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:#d8a52a}
.lx-std .lx-kpis{margin-top:12px}
body.lx-open .mob-dock{display:none!important}
@media (max-width:860px){.lx-kpis{grid-template-columns:repeat(2,1fr)}.lx-kpis .lx-wk{grid-column:1/-1}.lx-kpis.s4{grid-template-columns:repeat(2,1fr)}.lx-two{grid-template-columns:1fr}.lx-stm{display:none}}
@media (max-width:620px){.lx-in{padding:calc(32px + env(safe-area-inset-top,0px)) 16px 40px}.lx-hi{font-size:24px}.lx-av{width:44px;height:44px;font-size:19px}.lx-tabs{width:100%;justify-content:space-between}.lx-tabs button{flex:1;padding:0 10px}
.lx-form{grid-template-columns:1fr;padding:16px}.lx-bdg{grid-template-columns:repeat(2,1fr)}.lx-bars{gap:3px;padding:12px 10px 8px}.lx-crn{flex-basis:44%}
.lx-sth{flex-wrap:wrap}.lx-stn{flex:1 1 60%}.lx-stk{order:3;flex:1 1 100%;justify-content:space-between;gap:6px;padding-left:52px}.lx-nudge{flex-wrap:wrap}.lx-nudge b{flex:1 1 100%}}
html.hx-lx-open{scrollbar-gutter:auto}
/* Make a video: layers you can move, and their settings */
.rl-sel{position:absolute;border:2px dashed #F6A801;border-radius:6px;pointer-events:none;box-shadow:0 0 0 1px rgba(0,0,0,.5)}.rl-sel[hidden]{display:none}
.rl-grip{position:absolute;right:-11px;bottom:-11px;width:22px;height:22px;border-radius:50%;background:#F6A801;border:2px solid #111;pointer-events:auto;cursor:nwse-resize;touch-action:none}
.rl-ge{width:12px;height:34px;border-radius:6px}.rl-gl{left:-8px;right:auto;top:calc(50% - 17px);bottom:auto;cursor:ew-resize}.rl-gr{right:-8px;top:calc(50% - 17px);bottom:auto;cursor:ew-resize}
.rl-gt,.rl-gb{width:34px;height:12px;left:calc(50% - 17px);right:auto;cursor:ns-resize}.rl-gt{top:-8px;bottom:auto}.rl-gb{bottom:-8px}
.rl-sel:not(.rl-kk) .rl-ge{display:none}
.rl-moving .rl-cv{cursor:move}
.rl-mode{position:absolute;top:12px;left:12px;display:flex;gap:2px;padding:3px;border-radius:999px;background:rgba(0,0,0,.6);backdrop-filter:blur(4px)}
.rl-mode button{height:30px;padding:0 14px;border:0;border-radius:999px;background:transparent;color:#cfc6b4;font:800 13px/1 var(--body);cursor:pointer}.rl-mode button[aria-pressed="true"]{background:#F6A801;color:#111}
.rl-rec .rl-mode,.rl-rec .rl-sel{display:none!important}
.rl-box{display:flex;flex-direction:column;gap:10px;padding:12px;border-radius:14px;background:#151310;border:1px solid #2e2a22}
.rl-bh{display:flex;align-items:center;justify-content:space-between;font:900 12px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:#a99f8e}
.rl-bt{display:flex;gap:6px}.rl-bt .rl-ghost{height:30px;padding:0 12px;font-size:12.5px;letter-spacing:0;text-transform:none}
.rl-vset{display:flex;flex-direction:column;gap:10px}.rl-vset[hidden]{display:none}
.rl-rg{display:flex;align-items:center;gap:10px;font:800 13px/1 var(--body);color:#cfc6b4}.rl-rg span{flex:none;width:92px}.rl-rg input{flex:1;min-width:0;accent-color:#F6A801}
.rl-ck{display:flex;align-items:center;gap:8px;font:800 13px/1 var(--body);color:#cfc6b4}.rl-ck input{accent-color:#F6A801;width:16px;height:16px}
.rl-seg{display:flex;flex-wrap:wrap;gap:4px}.rl-seg button{height:30px;padding:0 11px;border-radius:999px;border:1px solid #3a3630;background:transparent;color:#cfc6b4;font:800 12.5px/1 var(--body);cursor:pointer}
.rl-seg button[aria-pressed="true"]{background:#F6A801;border-color:#F6A801;color:#111}
.rl-sws{display:flex;flex-wrap:wrap;gap:8px}.rl-kts{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font:800 12px/1 var(--body);color:#a99f8e}.rl-sws button{width:26px;height:26px;border-radius:50%;border:2px solid #3a3630;background:var(--c);cursor:pointer;padding:0}.rl-sws button[aria-pressed="true"]{box-shadow:0 0 0 2px #151310,0 0 0 4px #F6A801}
.rl-kn{display:flex;align-items:center;gap:10px}.rl-kn b{font:800 13.5px/1 var(--body);color:#FBF6EC;min-width:110px;text-align:center}.rl-kn .rl-ghost{width:36px;height:32px;padding:0;font-size:18px}
.rl-lab{font:900 11px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:#8a8170;margin-top:2px}
.rl-lays{display:flex;flex-direction:column;gap:4px}
.rl-ly{display:flex;align-items:center;gap:10px;padding:0 10px;height:38px;border-radius:10px;border:1px solid #2a2620;background:#12110f}.rl-ly.on{border-color:#F6A801}
.rl-ly input{accent-color:#F6A801;width:16px;height:16px;flex:none}
.rl-lyn{flex:1;min-width:0;height:100%;border:0;background:transparent;color:#FBF6EC;font:800 13.5px/1 var(--body);text-align:left;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rl-lyn small{color:#8a8170;font-weight:700}
.rl-set{display:flex;flex-direction:column;gap:10px;padding-top:4px}
.rl-txt{width:100%;box-sizing:border-box;border-radius:10px;border:1px solid #3a3630;background:#141311;color:#FBF6EC;font:700 14px/1.35 var(--body);padding:10px 12px;resize:vertical}
.rl-lrow .rl-ghost{height:32px;padding:0 12px;font-size:12.5px}.rl-del{color:#ff8a7a!important;border-color:#5a2a24!important}
.rl-recb{width:100%;position:sticky;bottom:0;z-index:3;box-shadow:0 -10px 18px 8px rgba(8,7,6,.94)!important}.rl-recb .rl-l2,.rl-rec .rl-recb .rl-l1{display:none}.rl-rec .rl-recb .rl-l2{display:inline}.rl-rec .rl-recb{background:#ff4d3d!important;color:#fff!important}
.rl-say{margin:0;min-height:1em;font:700 13px/1.4 var(--body);color:#ffc93d}
.rl-done{display:flex;flex-direction:column;gap:10px;padding:12px;border-radius:14px;background:#151310;border:1px solid #5a400a}.rl-done[hidden]{display:none}
.rl-done video{width:100%;max-height:300px;border-radius:10px;background:#000}
.rl-row{display:flex;flex-wrap:wrap;gap:8px}.rl-go{display:inline-flex;align-items:center;height:40px;padding:0 16px;border-radius:999px;border:0;background:#F6A801;color:#111;font:900 14px/1 var(--body);text-decoration:none;cursor:pointer}
.rl-ghost{height:40px;padding:0 16px;border-radius:999px;border:1px solid #3a3630;background:transparent;color:#cfc6b4;font:800 13.5px/1 var(--body);cursor:pointer}
@media (max-width:820px){.rl-gate{flex-direction:column;justify-content:flex-start;gap:14px;padding:12px;overflow:auto}
.rl-stage{height:auto;width:min(100%,calc(56vh * 9 / 16));margin:0 auto}.rl-side{width:100%;max-width:520px;max-height:none;overflow:visible;margin:0 auto 20px}
.rl-h{order:-1}.rl-recb{position:sticky;bottom:12px;z-index:3}}
.mb-card{max-width:440px;width:100%;box-sizing:border-box;min-width:0}.mb-card .pg-fk{margin-top:4px}
.mb-body{text-align:left;margin-top:6px}.mb-load{text-align:center;color:#7a7060;font:700 14px/1.4 var(--body);padding:18px 0}
.mb-sum{border:1px solid #2e2a22;border-radius:16px;background:#151310;padding:4px 16px;margin:6px 0 16px}
.mb-sum>div{display:flex;align-items:center;gap:10px;min-height:46px;border-top:1px solid #2a2620}.mb-sum>div:first-child{border-top:0}
.mb-sum b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.mb-sum span{flex:none;width:112px;font:700 13px/1.3 var(--body);color:#8a8170}.mb-sum b{flex:1;font:800 15px/1.3 var(--body);color:#FBF6EC}
.mb-h{margin:4px 0 10px;font:800 15px/1.3 var(--body);color:#111;text-align:left}
.mb-opts{display:grid;gap:8px;margin:0 0 14px}
.mb-opt{display:flex;align-items:center;gap:10px;width:100%;min-height:54px;padding:10px 14px;border-radius:14px;border:1px solid #2e2a22;background:#151310;color:#FBF6EC;cursor:pointer;text-align:left;font-family:var(--body)}
.mb-opt span{flex:1;display:flex;flex-direction:column;gap:3px}.mb-opt b{font:800 15px/1.2 var(--body)}.mb-opt small{font:700 12px/1 var(--body);color:#8a8170}
.mb-opt em{font:800 14px/1 var(--body);font-style:normal;color:#cfc6b4}.mb-opt i{font:800 11px/1 var(--body);font-style:normal;letter-spacing:.06em;text-transform:uppercase;color:#111;background:#F6A801;border-radius:999px;padding:5px 8px}
.mb-opt:not(.on):hover{border-color:#5a400a}.mb-opt.on{border-color:#F6A801;cursor:default;background:linear-gradient(165deg,#201b12,#151310)}
.mb-row{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:4px 0}
.mb-link{border:0;background:none;color:#3d372d;font:700 13.5px/1 var(--body);text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:8px 2px}
.mb-sum .mb-link{flex:none;color:#F6A801}.mb-cancel{color:#7a7060}
.mb-recs{border:1px solid #e3d9c6;background:#fff;border-radius:14px;padding:4px 14px;margin:6px 0 10px}.mb-recs>div{display:flex;align-items:center;gap:10px;min-height:42px;border-top:1px solid #efe7d8}.mb-recs>div:first-child{border-top:0}
.mb-recs span{flex:1;font:700 13.5px/1 var(--body);color:#5c5547}.mb-recs b{font:800 14px/1 var(--body);color:#111}
.mb-note{margin:0 0 12px;padding:10px 14px;border-radius:12px;background:#1d1b18;border:1px solid #3a3630;color:#cfc6b4;font:700 13.5px/1.4 var(--body)}
.mb-warn{display:flex;flex-direction:column;gap:6px;margin:0 0 14px;padding:12px 14px;border-radius:12px;background:#201b12;border:1px solid #5a400a;color:#ffc93d;font:700 13.5px/1.4 var(--body)}
.mb-warn b{font:800 15px/1.2 var(--body);color:#FBF6EC}.mb-warn span{color:#cfc6b4}
.mb-btn{align-self:flex-start;margin-top:4px;border:0;border-radius:999px;background:#F6A801;color:#111;font:800 13.5px/1 var(--body);padding:10px 16px;cursor:pointer}
.mb-confirm{text-align:center}.mb-confirm .mb-h{text-align:center;font-size:18px}.mb-confirm .mb-warn{text-align:left}
.mb-confirm .mb-back:not(.pg-go){display:block;margin:6px auto 0}.mb-danger{width:100%;height:48px;border-radius:999px;border:1.5px solid #b3402c;background:transparent;color:#b3402c;font:800 15px/1 var(--body);cursor:pointer;margin-bottom:10px}
.mb-cin{text-align:center;letter-spacing:.4em;font-size:22px}
.mb-help{margin:16px 0 0;font:600 12px/1.6 var(--body);color:#7a7060;text-align:center}.mb-help a{color:#3d372d}
@media (max-width:480px){.mb-sum span{width:92px}.mb-brand{display:none}}
.mb-brand{font-style:normal}
.pl-x{position:absolute;top:16px;right:16px;width:32px;height:32px;border-radius:50%;border:1px solid #3a3630;background:#1d1b18;color:#cfc6b4;font:400 20px/1 sans-serif;cursor:pointer;display:grid;place-items:center;padding:0}
.pl-seg{display:flex;gap:4px;padding:4px;border-radius:999px;background:#151310;border:1px solid #2e2a22;margin:4px 0 14px}
.pl-seg button{flex:1;height:38px;border:0;border-radius:999px;background:transparent;color:#cfc6b4;font:800 14px/1 var(--body);cursor:pointer}
.pl-seg button i{font-style:normal;font-size:11.5px;color:#F6A801;margin-left:4px}
.pl-seg button[aria-checked="true"]{background:#F6A801;color:#111}.pl-seg button[aria-checked="true"] i{color:#111}
.pl-price{display:flex;align-items:baseline;justify-content:center;gap:10px;margin:0 0 14px}
.pl-price b{font:800 30px/1 var(--body);color:#111}.pl-price s{font:700 14px/1 var(--body);color:#8a8170}.pl-price s:empty{display:none}
.pl-fine{margin:12px 0 0;font:600 12px/1.45 var(--body);color:#8a8170;text-align:center}.pl-fine a{color:#cfc6b4;text-decoration:underline}
.pl-wait{text-align:center}
/* ---------- ch1 looks (2026-10-29, BRAND.md "Rig"). The rig keeps its own type (Nunito and Fredoka, as JC prefers).
The page is dark edge to edge: no cream behind the rig, no scrollbar gutter, no light band under a zoomed rig ---------- */
html.hx-solo,html:has(>body.solo){scrollbar-gutter:auto;background:#111}
body.solo{background:#111} /* the hero's own black, so a zoomed rig never shows a seam below it */
html:has(>body.solo.kd){background:#FBF6EC}
/* Layers (BRAND.md "Rig"): one scale for everything that floats over the rig, low to high.
rig 0-40 · panels 60 (Mix, menus in the bars) · cards 320 (tuner, metronome, Look, My club, video cards) · sheets 9000 (Keys,
Studio, the phone sheets) · modals 9500 (feedback, sign in, the membership gate) · toasts 9800 */
:root{--z-rig:1;--z-panel:60;--z-card:320;--z-sheet:9000;--z-modal:9500;--z-toast:9800}
body.solo:not(.mob) :is(#metro,#tuner,.mc-card,.kla-card,.org-card){z-index:var(--z-card)!important}
body.solo .fb-card{z-index:var(--z-modal)}
body.solo :is(.cs-toast,.org-toast){z-index:var(--z-toast)}
/* Tuner and metronome: dark cards in the rig's card style (as Look, Keys and the metronome card), placed inside the rig by tchFloat */
body.solo:not(.kd) :is(#metro,#tuner){width:320px;padding:16px;border-radius:18px;background:linear-gradient(180deg,#24211c,#171512);border:1px solid #3a3630;border-top:3px solid var(--kl,#F6A801);box-shadow:0 24px 54px rgba(0,0,0,.65);color:#FBF6EC;font:500 13px/1.4 var(--body);box-sizing:border-box}
body.solo:not(.kd) :is(#metro,#tuner) .mt-top{font:700 17px/1.2 var(--body);color:#FBF6EC}
body.solo:not(.kd) :is(#metro,#tuner) .mt-x{width:30px;height:30px;border-radius:50%;border:1px solid #3a3630;background:#1b1916;color:#a99f8e}
body.solo:not(.kd) :is(#metro,#tuner) .mt-x:hover{color:#FBF6EC;border-color:#5a5246}
body.solo:not(.kd) #metro .mt-step{width:44px;height:44px;border:1px solid #3a3630;background:#1d1b18;color:#FBF6EC}
body.solo:not(.kd) #metro .mt-step:hover{border-color:var(--kl,#F6A801);color:var(--kl,#F6A801)}
body.solo:not(.kd) #metro .mt-bpm input{color:#FBF6EC;font:800 44px/1 var(--body);font-variant-numeric:tabular-nums}
body.solo:not(.kd) #metro .mt-bpm:hover input{border-bottom-color:#3a3630}
body.solo:not(.kd) #metro .mt-bpm small,body.solo:not(.kd) :is(#metro,#tuner) .mt-tip,body.solo:not(.kd) #tuner .tn-hz{font:600 12px/1.3 var(--body);color:#8a8170}
body.solo:not(.kd) #metro #mtRange{accent-color:var(--kl,#F6A801)}
body.solo:not(.kd) #metro .mt-vol{color:#a99f8e}
body.solo:not(.kd) #metro .mt-v::before{background:#4a453d!important}
body.solo:not(.kd) #metro .mt-v .pv-thumb{box-shadow:0 0 0 3px #171512,0 1px 3px rgba(0,0,0,.4)}
body.solo:not(.kd) #metro .mt-styles{gap:6px}
body.solo:not(.kd) #metro .mt-styles button{height:36px;border-radius:999px;border:1px solid #3a3630;background:#1d1b18;color:#cfc6b4;font:600 13px/1 var(--body);white-space:nowrap}
body.solo:not(.kd) #metro .mt-styles button:hover{border-color:#5a5246;color:#FBF6EC}
body.solo:not(.kd) #metro .mt-styles button[aria-checked="true"]{background:var(--kl,#F6A801);border-color:var(--kl,#F6A801);color:#111}
body.solo:not(.kd) #metro .mt-gl{font:600 12px/1.2 var(--body);letter-spacing:0;text-transform:none;color:#8a8170}
body.solo:not(.kd) :is(#metro,#tuner) .mt-sig{gap:2px;padding:3px;border-radius:999px;background:#121110;border:1px solid #2a2723}
body.solo:not(.kd) :is(#metro,#tuner) .mt-sig button{height:32px;padding:0 4px;border-radius:999px;color:#cfc6b4;font:600 13px/1 var(--body);white-space:nowrap}
body.solo:not(.kd) :is(#metro,#tuner) .mt-sig button[aria-checked="true"]{background:var(--kl,#F6A801);color:#111}
body.solo:not(.kd) #metro .mt-beats button{border:1.5px solid #3a3630;background:#1d1b18;color:#a99f8e;font:600 14px/1 var(--body)}
body.solo:not(.kd) #metro .mt-beats button.acc{border-color:var(--kl,#F6A801);color:#FBF6EC;border-width:2px}
body.solo:not(.kd) #metro .mt-beats button.on{background:var(--kl,#F6A801);border-color:var(--kl,#F6A801);color:#111}
body.solo:not(.kd) :is(#metro,#tuner) .mt-play{display:flex;align-items:center;justify-content:center;gap:8px;height:46px;border-radius:999px;border:0;background:linear-gradient(180deg,#ffd36b,#F6A801 55%,#e09a00);color:#111;font:700 15px/1 var(--body);box-shadow:0 8px 22px rgba(246,168,1,.22);transform:none}
body.solo:not(.kd) #tuner .mt-play[data-ic="mic"]::before{content:"";width:18px;height:18px;flex:none;background:currentColor;-webkit-mask:var(--ic-mic) center/contain no-repeat;mask:var(--ic-mic) center/contain no-repeat}
body.solo{--ic-mic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='3' width='6' height='11' rx='3'/%3E%3Cpath d='M5.5 11a6.5 6.5 0 0 0 13 0M12 17.5V21M8.5 21h7'/%3E%3C/svg%3E")}
body.solo:not(.kd) #metro .mt-cred{font:500 11.5px/1.4 var(--body);color:#8a8170}
body.solo:not(.kd) #tuner .tn-note{font:800 56px/1 var(--body);color:#FBF6EC}
body.solo:not(.kd) #tuner .tn-note sub{color:#8a8170;font-weight:600}
body.solo:not(.kd) #tuner .tn-meter{height:28px;background:#121110;box-shadow:inset 0 0 0 1px #2a2723}
body.solo:not(.kd) #tuner .tn-zone{background:rgba(99,211,149,.16)}
body.solo:not(.kd) #tuner .tn-mid{background:#63d395}
body.solo:not(.kd) #tuner .tn-needle{background:#5a5246}
body.solo:not(.kd) #tuner .tn-needle.live{background:#FBF6EC}
body.solo:not(.kd) #tuner .tn-needle.ok{background:#63d395}
body.solo:not(.kd) #tuner .tn-say{font:700 15px/1.3 var(--body);color:#FBF6EC}
body.solo:not(.kd) #tuner .tn-say.ok{color:#63d395}
body.solo:not(.kd) #tuner .tn-strings button{border:1.5px solid #3a3630;background:#1d1b18;color:#cfc6b4;font:600 14px/1 var(--body)}
body.solo:not(.kd) #tuner .tn-strings button.near{border-color:var(--kl,#F6A801);border-width:2px;color:#FBF6EC}
body.solo:not(.kd) #tuner .tn-strings button.ok{background:#63d395;border-color:#63d395;color:#111}
/* Board (2026-10-29): your camera at every size. Teach keeps its side column; Panels, Big, Full and Pop out show it as a corner tile */
.bd-body{position:relative}
.bd:not(.bd-teach) .bd-side{display:flex;position:absolute;right:10px;bottom:10px;z-index:3;width:clamp(150px,20%,240px);aspect-ratio:4/3;max-height:calc(100% - 20px);padding:0;border:1px solid #3a3630;border-radius:12px;background:#151412;box-shadow:0 10px 26px rgba(0,0,0,.5);overflow:hidden}
.bd:not(.bd-teach) .bd-side .bd-lcd{display:none}
.bd:not(.bd-teach) .bd-cam{min-height:0;border-radius:0}
.bd:not(.bd-teach) .bd-camb{width:40px;padding:0;justify-content:center}
.bd:not(.bd-teach) .bd-camb span{display:none}
.bd.bd-short:not(.bd-teach) .bd-side{width:clamp(120px,14%,180px)}
body.solo.bd-teaching .kb-wrap{transition:none}
.rig-panel.np-meas,.rig-panel.np-meas *{transition:none!important}
/* Pop out: the choice cards stack in one even column (never 2 + 1) */
.bd.bd-win .bd-opts{display:grid;grid-template-columns:minmax(0,1fr);width:100%;max-width:340px}
.bd.bd-win .bd-opts button{width:auto}
/* Chord screen boot line: the message never runs into the percentage, and the live screen stays hidden until the boot layer is gone */
body.solo .lb-st{gap:1ch}
body.solo .lb-st .lb-msg{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
body.solo .lb-st .lb-pct{flex:none}
/* Yellow case: everything printed on or sitting in the case stays readable (text on yellow is #111) */
body.solo.cs-yellow:not([class*="th-"]) .jy .jy-clock{background:#161513!important;opacity:1!important}
body.solo.cs-yellow:not([class*="th-"]) .jy .jy-clock small{color:#a07a26!important}
body.solo.cs-yellow:not([class*="th-"]) .kb-switches :is(.ud-btn,#mtBtn,.mt-btn){background:#161513!important;border-color:#161513!important;color:#cfc6b4!important}
body.solo.cs-yellow:not([class*="th-"]) .kb-switches :is(.ud-btn,#mtBtn,.mt-btn) svg{color:inherit!important}
body.solo.cs-yellow:not([class*="th-"]) .kb-switches .ud-btn:disabled{color:#6f675b!important;opacity:1!important}
body.solo.cs-yellow:not([class*="th-"]) .kb-brand .cha{color:rgba(17,17,17,.62);text-shadow:0 1px 0 rgba(255,255,255,.25)}
body.solo.cs-yellow:not([class*="th-"]) .kb-brand .cha b{color:#111;text-shadow:none}
/* Founding / sign-up card: a dark rig card with a yellow top edge (was cream) */
body.solo:not(.kd) .pg-card{background:linear-gradient(180deg,#24211c,#171512);color:#FBF6EC;border:1px solid #3a3630;border-top:4px solid #F6A801;border-radius:24px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
body.solo:not(.kd) .pg-card h2{font:800 28px/1.12 var(--body);color:#FBF6EC}
body.solo:not(.kd) .pg-card :is(.pg-p,.pg-opt){color:#b9af9c}
body.solo:not(.kd) .pg-card :is(.pg-s,.pg-links,.pg-later){color:#8a8170}
body.solo:not(.kd) .pg-card .pg-later:hover{color:#FBF6EC;background:rgba(255,255,255,.05)}
body.solo:not(.kd) .pg-card :is(.pg-k,.pg-fk){display:inline-block;padding:5px 12px;border:1px solid #332d24;border-radius:999px;background:rgba(255,255,255,.03);font:600 13px/1.2 var(--body);letter-spacing:0;text-transform:none;color:#b9af9c}
body.solo:not(.kd) .pg-card .pg-links button{color:#FBF6EC;font-weight:700;text-decoration-color:rgba(246,168,1,.6)}
body.solo:not(.kd) .pg-card :is(input[type=email],.pg-in){border:1px solid #3a3630;background:#0d0c0a;color:#FBF6EC;font-weight:600}
body.solo:not(.kd) .pg-card :is(input[type=email],.pg-in)::placeholder{color:#8a8170}
body.solo:not(.kd) .pg-card :is(input[type=email],.pg-in):focus{border-color:#F6A801}
body.solo:not(.kd) .pg-card .pg-err{color:#ff8f7d;font-weight:700}
body.solo:not(.kd) .pg-card .pg-price b{font:800 24px/1 var(--body);}
body.solo:not(.kd) .pg-card .pg-price span{color:#b9af9c;font-weight:600}
body.solo:not(.kd) .pg-card .pg-price s{font:600 18px/1 var(--body);color:#8a8170}
body.solo:not(.kd) .pg-card .pg-upd{color:#FBF6EC}
body.solo:not(.kd) .pg-card .pg-pp{border:0!important}
body.solo:not(.kd) .pg-card .pg-h-ch1 :is(.ch1,.ch1t){color:#F6A801}
body.solo:not(.kd) .pg-card a{color:#F6A801;text-decoration:underline;text-decoration-color:rgba(246,168,1,.4);text-underline-offset:2px}
body.solo:not(.kd) .pg-card .btn-yellow{box-shadow:0 8px 22px rgba(246,168,1,.22)}
/* Labels are sentence case (BRAND.md: no all-caps tracked eyebrows; uppercase also turns ch1 into CH1). Card titles read as titles */
.fb-m i svg{display:block}.fb-m i{color:#a99f8e}.fb-m:hover i,.fb-m[aria-pressed="true"] i{color:#F6A801}
.th-dice{display:inline-flex;align-items:center;gap:7px}.th-dice svg{flex:none;color:var(--kl,#F6A801)}
/* Mix and the EQ cards: each knob's value sits under its ring, not on it */
body.solo .eq-k .kn-wrap{gap:19px}
body.solo .eq-k .knob .k-num{bottom:-16px}
/* Mix › Space: the spare room shared out evenly, so no pill is tighter than the rest and none touches the edge */
body.solo .eq-pop .vb-seg{display:flex!important;gap:2px}
body.solo .eq-pop .vb-seg>[data-verb]{flex:1 1 auto;min-width:0;padding:0 7px!important;font-size:12.5px;white-space:nowrap;text-align:center;justify-content:center}
/* resize grips: a small dot grip that shows on hover or focus, not a bar that reads as a scrollbar */
@media (min-width:621px){
html:not(.ffo-panelsize:where(:not(.fft-panelsize))) body.solo .rig-panel .mix-strip>.ms-rs::after{width:8px;height:14px;border-radius:0;background:radial-gradient(circle,#8a8170 0 1.1px,transparent 1.5px) 0 0/4px 5px;opacity:0}
html:not(.ffo-panelsize:where(:not(.fft-panelsize))) body.solo .rig-panel .mix-strip:hover>.ms-rs::after{opacity:.9}
html:not(.ffo-panelsize:where(:not(.fft-panelsize))) body.solo .rig-panel .mix-strip>.ms-rs:hover::after,html:not(.ffo-panelsize:where(:not(.fft-panelsize))) body.solo .rig-panel .mix-strip>.ms-rs:focus-visible::after,html:not(.ffo-panelsize:where(:not(.fft-panelsize))) body.solo .rig-panel .mix-strip.ms-drag>.ms-rs::after{opacity:1;height:14px;background:radial-gradient(circle,var(--kl,#F6A801) 0 1.2px,transparent 1.6px) 0 0/4px 5px}
body.solo .kb-grip::after{width:8px;height:14px;margin:-7px 0 0 -4px;border-radius:0;background:radial-gradient(circle,rgba(255,255,255,.55) 0 1.1px,transparent 1.5px) 0 0/4px 5px}
}
body.solo .lcd:has(>.lcd-boot)>:not(.lcd-boot):not(.lcd-grip):not(button):not(:has(button)){visibility:hidden}
/* Upright tablet (2026-10-29): the third sound panel takes the whole row (no empty half row), and the bottom bar is two even rows:
tempo, octave and key spread across the first; Loop, Trail, Mix, Look and the ch1 plate on the second */
@media (min-width:621px) and (max-width:900px) and (orientation:portrait){
html body.solo:not(.mob):not(.np-slide):not(.kd) .rig-panel #mixPanel>.mix-strip:not(.ms-col):not([hidden]){flex-grow:1!important;max-width:none!important}
html body.solo:not(.mob):not(.kd) #kbTools>.tools-br{display:none!important}
html body.solo:not(.mob):not(.kd) #kbTools{justify-content:space-between}
}html:has(>body.solo.kd.kd-dark){background:#1E1B3A}