.pb-fig{min-width:0;margin:0}.pb-cols{position:relative}.pb-vals{z-index:2;pointer-events:none;position:absolute}.pb-val{color:var(--ink-2);white-space:nowrap;font-variant-numeric:tabular-nums lining-nums;transition:opacity var(--t-fast) var(--ease);font-size:15px;font-weight:500;line-height:1;position:absolute;translate:-50%}.pb-val[data-end]{translate:0}.pb-val[data-accent]{color:var(--accent);font-weight:600}.pb-val[data-hide]{visibility:hidden}.pb-val[data-plate]{background:var(--s2);box-shadow:0 0 0 1px var(--line);border-radius:6px;margin:-3px -6px;padding:3px 6px}.pb-val[style*=--lead]:after{content:"";width:1px;height:calc(var(--lead) - 2px);background:#dcc286b3;position:absolute;top:calc(100% + 2px);right:3px}.pb-val:not([data-end])[style*=--lead]:after{left:50%;right:auto}.pb-cols:is(:hover,:focus-within) .pb-val{opacity:0}.pb-cols[data-pair] .bc-s-col>i:first-child{background:var(--accent)!important;box-shadow:none!important}.pb-cols[data-pair] .bc-s-col>i:nth-child(2){box-shadow:none!important;background:#7fb3d5!important}.pb-cols[data-tone] .bc-s-col>i{background:var(--pb-tone)!important;box-shadow:none!important}.pb-cols[data-tone] .pb-val[data-accent]{color:var(--pb-tone)}.pb-cols[data-tone] .pb-val[style*=--lead]:after{background:var(--pb-tone)}.ph-twin{gap:16px;display:grid}@media (min-width:1024px){.ph-twin{grid-template-columns:repeat(2,minmax(0,1fr))}}.ph-twin-one{gap:8px;min-width:0;display:grid}.ph-twin-one>.ph-key{justify-self:start}.ph-keys{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.ph-key{height:34px;color:var(--cream);white-space:nowrap;align-items:center;gap:8px;padding:0 12px 0 10px;font-size:15px;display:inline-flex}.ph-key i{background:var(--accent);border-radius:3px;width:10px;height:10px}.ph-key[data-k=b] i{background:#7fb3d5}.ph-key b{color:var(--ink);font-weight:600}.ph-keys-when{color:var(--cream);font-size:15px}