.mini-kb{width:100%;margin-top:var(--sp-2);-webkit-user-select:none;user-select:none}.mini-kb-keys{display:flex;height:28px;width:100%}.mini-kb-octave{position:relative;display:flex}.mini-kb-white{flex:1 1;height:100%;background:#fff;border:1px solid rgba(0,0,0,.08);border-top:none;border-radius:0 0 2px 2px;opacity:.18}.mini-kb-white.mini-kb-active{opacity:1;border-color:rgba(0,0,0,.25);box-shadow:0 1px 2px rgba(0,0,0,.08)}.mini-kb-black{position:absolute;top:0;width:calc(100% / 7 * .57);height:60%;background:#1a1a1a;border-radius:0 0 2px 2px;z-index:1;transform:translateX(-50%);opacity:.1}.mini-kb-black.mini-kb-active{opacity:1}.mini-kb-labels{position:relative;height:12px;width:100%}.mini-kb-label{position:absolute;top:1px;font-size:var(--text-xs);color:var(--text-muted);line-height:1;white-space:nowrap}.mini-kb-framed .mini-kb-keys{background:#2a2a32;border-radius:var(--radius-sm);padding:3px 3px 0}.mini-kb-framed .mini-kb-white{opacity:.15}.mini-kb-framed .mini-kb-white.mini-kb-active{opacity:1}.mini-kb-framed .mini-kb-black{opacity:.12}.mini-kb-framed .mini-kb-black.mini-kb-active{opacity:1}[data-theme=light] .mini-kb-framed .mini-kb-keys{background:var(--bg-hover);box-shadow:inset 0 1px 2px rgba(0,0,0,.06)}[data-theme=light] .mini-kb-framed .mini-kb-white{opacity:.25;border-color:rgba(0,0,0,.06)}[data-theme=light] .mini-kb-framed .mini-kb-white.mini-kb-active{opacity:1;background:#fff;border-color:rgba(0,0,0,.15);box-shadow:0 1px 2px rgba(0,0,0,.06)}[data-theme=light] .mini-kb-framed .mini-kb-black{opacity:.12}[data-theme=light] .mini-kb-framed .mini-kb-black.mini-kb-active{opacity:1;background:#2a2520}