/* B077OV — shared keyboard-label readability standard.
   Geometry remains lesson-owned; this layer standardises contrast, type and clipping safety. */
:root{--cw-key-label-bg:#07101f;--cw-key-label-fg:#f7fbff;--cw-key-label-border:#dcecff;--cw-key-distance:#9bc7ff}
.toneBadge,.degreeBadge,.keyboard .badge,.intervalKeyboard .badge,.piano .badge,.whiteCountBadge,.geometryCountBadge{box-sizing:border-box;font-family:Arial,system-ui,sans-serif;font-weight:950;line-height:1;text-shadow:none}
.toneBadge{display:inline-flex!important;align-items:center;justify-content:center;min-width:36px;min-height:20px;max-width:76px;padding:3px 6px!important;border:1px solid var(--cw-key-label-border)!important;border-radius:7px!important;background:var(--cw-key-label-bg)!important;color:var(--cw-key-label-fg)!important;font-size:10px!important;white-space:nowrap!important;box-shadow:0 2px 7px rgba(0,0,0,.66)!important;z-index:50!important}
.blackKey .toneBadge,.b .toneBadge{min-width:34px;max-width:68px;font-size:9.5px!important}
.degreeBadge,.keyboard .badge,.intervalKeyboard .badge,.piano .badge{min-width:22px;min-height:20px;padding:3px 5px!important;border:1px solid var(--cw-key-label-border)!important;border-radius:7px!important;background:var(--cw-key-label-bg)!important;color:var(--cw-key-label-fg)!important;font-size:10px!important;white-space:nowrap!important;box-shadow:0 2px 7px rgba(0,0,0,.62)!important;z-index:48!important}
.whiteCountBadge,.geometryCountBadge{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-width:19px!important;width:19px!important;height:19px!important;padding:0!important;border:1px solid #806d17!important;border-radius:50%!important;background:#ffe36d!important;color:#06101e!important;font-size:10px!important;z-index:48!important}
.intervalDistanceLabel,.intervalOctaveLabel{padding:2px 7px!important;border:1px solid #5f88ba;border-radius:6px;background:var(--cw-key-label-bg)!important;color:#e8f4ff!important;box-shadow:0 2px 8px rgba(0,0,0,.7);text-shadow:none!important}
.intervalDistanceBracket{border-color:var(--cw-key-distance)!important}
.intervalAnchor{color:var(--cw-key-distance)!important;text-shadow:0 1px 2px #000,0 0 4px #07101f}
@media(max-width:760px){.toneBadge{font-size:9px!important;min-width:32px;padding:3px 4px!important}.degreeBadge,.keyboard .badge,.intervalKeyboard .badge,.piano .badge{font-size:9px!important;padding:3px 4px!important}}