FIGURE.wp-block-table > TABLE > TBODY > TR > TD{padding:15px}
DIV.mbp-scale DIV.wp-block-button{margin-top:20px}
.mbp-staff-note, .mbp-piano-key { transition: fill 80ms ease, stroke 80ms ease, filter 80ms ease; }
#table-display-piano .mbp-piano-key:not(.mbp-piano-key-playing){filter:sepia(0.8) contrast(0.9) brightness(0.9) saturate(2)}
.mbp-staff-note-playing, .mbp-staff-note-playing * {
    fill: var(
        --mbp-playback-highlight,
        #f3c84b
    ) !important;

    stroke: var(
        --mbp-playback-highlight,
        #f3c84b
    ) !important;

    filter: drop-shadow(
        0 0 3px rgba(243, 200, 75, 0.7)
    );
}

.mbp-piano-key-playing {
    fill: var(
        --mbp-playback-key,
        #fff0a0
    ) !important;

    stroke: var(
        --mbp-playback-key-border,
        #ffffff
    ) !important;

    stroke-width: 2 !important;

    filter:
        brightness(1.15)
        saturate(1.1)
        drop-shadow(
            0 0 4px rgba(243, 200, 75, 0.8)
        );
}
.mbp-scale-playback-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

.entry-content > .wp-block-group, .entry-content > .wp-block-cover, .entry-content > .wp-block-columns{padding-top:2px; padding-bottom:20px; margin-bottom:5px}
h4.wp-block-heading{padding-bottom:0!important; margin-bottom:5px!important}

div#table-display-intervals{margin:10px 0 0 0}
div#table-display-intervals rect {stroke-width: 1.5; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));}
div#table-display-intervals rect[width="36"] {fill: #284843; stroke: #568078;}
div#table-display-intervals rect[width="72"] {fill: #70571f; stroke: #b58b32;}
div#table-display-intervals rect[width="108"] {fill: #703629; stroke: #b85f45;}
div#table-display-intervals text { fill: #f5e7c3; }

@media (max-width: 768px) {
    BODY.page-id-900 .wp-container-core-group-is-layout-a02a1dd6{grid-template-columns: repeat(auto-fill, minmax(min(3rem, 100%), 1fr))}
    FIGURE.wp-block-table > TABLE > TBODY > TR > TD{padding:unset}
    .wp-block-table table, .wp-block-table tbody, .wp-block-table tr, .wp-block-table td { display: block;
        width: 100%;
        border: none;
    }
    .wp-block-table tr {
        margin-bottom: 1.5rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding-bottom: 1rem;
    }
    .wp-block-table tr:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
    .wp-block-table td:nth-child(odd) { font-weight: 700; padding-bottom: 0.5rem; color: var(--mbp-piano-active, #d6a84b); }
    .wp-block-table td:nth-child(even) { padding-top: 0; padding-bottom: 0.5rem; }
    .mbp-interval-diagram, .mbp-piano-diagram { width: 100%; height: auto; }
}

/*
 * SCALE TRANSPOSITION NAVIGATION
 */

.mbp-scale-navigation {
    --mbp-nav-gold: #d6a84b;
    --mbp-nav-border: rgba(214, 168, 75, 0.34);
    --mbp-nav-surface: rgba(255, 255, 255, 0.025);
    --mbp-nav-surface-hover: rgba(214, 168, 75, 0.075);

    margin: 34px 0 12px;
    padding: 14px 0;
    border-top: 1px solid var(--mbp-nav-border);
    border-bottom: 1px solid var(--mbp-nav-border);
}

.mbp-scale-navigation-grid {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(170px, 0.8fr)
        minmax(0, 1fr);
    gap: 10px;
    align-items: stretch;
}

.mbp-scale-navigation .mbp-scale-nav-link {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding: 11px 13px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: var(--mbp-nav-surface);
    color: inherit;
    text-decoration: none;
}

.ast-single-post .entry-content .mbp-scale-navigation-grid A:link, .ast-single-post .entry-content .mbp-scale-navigation-grid A:visited, .ast-single-post .entry-content .mbp-scale-navigation-grid A:active{text-decoration:none}
.ast-single-post .entry-content .mbp-scale-navigation-grid A > SPAN::before, .ast-single-post .entry-content .mbp-scale-navigation-grid A > SPAN::after{width:17px; display:inline-block; position:relative; top:0}
.mbp-scale-nav-previous > .mbp-scale-nav-name{margin-left:25px}
.mbp-scale-nav-next > .mbp-scale-nav-name{margin-right:25px}

.mbp-scale-navigation .mbp-scale-nav-link:hover {
    background: var(--mbp-nav-surface-hover);
    border-color: var(--mbp-nav-border);
    color: inherit;
}

.mbp-scale-navigation .mbp-scale-nav-link:focus-visible {
    outline: 2px solid var(--mbp-nav-gold);
    outline-offset: 3px;
}

.mbp-scale-nav-action {
    margin-bottom: 3px;
    color: var(--mbp-nav-gold);
    line-height: 1.2;
}

.mbp-scale-nav-name {
    font-size: 1rem;
    line-height: 1.3;
}

/* Previous scale */

.mbp-scale-nav-previous {
    align-items: flex-start;
    text-align: left;
}

.mbp-scale-nav-previous
.mbp-scale-nav-action::before {
    content: "←";
    margin-right: 0.45em;
    font-size: 1.05em;
}

/* Enharmonic equivalent */

.mbp-scale-nav-alternate {
    align-items: center;
    text-align: center;
}

.mbp-scale-nav-alternate
.mbp-scale-nav-action::before {
    content: "↔";
    margin-right: 0.4em;
}

/* Next scale */

.mbp-scale-nav-next {
    align-items: flex-end;
    text-align: right;
}

.mbp-scale-nav-next
.mbp-scale-nav-action::after {
    content: "→";
    margin-left: 0.45em;
    font-size: 1.05em;
}

/*
 * Empty elements preserve the symmetrical desktop layout.
 */

.mbp-scale-nav-placeholder {
    display: block;
    min-height: 58px;
}

@media (max-width: 640px) {
    .mbp-scale-navigation {
        margin-top: 28px;
    }

    .mbp-scale-navigation-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas:
            "previous next"
            "alternate alternate";
        gap: 8px;
    }

    .mbp-scale-nav-previous {
        grid-area: previous;
    }

    .mbp-scale-nav-next {
        grid-area: next;
    }

    .mbp-scale-nav-alternate {
        grid-area: alternate;
    }

    .mbp-scale-navigation .mbp-scale-nav-link {
        padding: 10px;
    }

    .mbp-scale-nav-action {
        font-size: 0.7rem;
    }
    
    .ast-single-post .entry-content .mbp-scale-navigation-grid A > SPAN::before, .ast-single-post .entry-content .mbp-scale-navigation-grid A > SPAN::after{font-size: 0.85rem}

    /*
     * Do not leave an empty second row when there is
     * no enharmonic spelling.
     */
    .mbp-scale-nav-alternate.mbp-scale-nav-placeholder {
        display: none;
    }
}

/*
 * SCALE-DERIVED CHORDS
 */

#table-display-chords {
    line-height: 1.9;
}

#table-display-chords .mbp-chord-item {
    white-space: nowrap;
}

#table-display-chords .mbp-chord-control {
    display: inline;
    margin: 0;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: inherit !important;
    font: inherit;
    line-height: inherit;
    text-transform: none;
    white-space: nowrap;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

#table-display-chords .mbp-chord-roman {
    color: var(--mbp-piano-active, #d6a84b);
    font-weight: 700;
}

#table-display-chords .mbp-chord-control:hover .mbp-chord-notes,
#table-display-chords .mbp-chord-control:focus-visible .mbp-chord-notes {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
}

#table-display-chords .mbp-chord-control:focus-visible {
    outline: 2px solid var(--mbp-piano-active, #d6a84b);
    outline-offset: 3px;
}

#table-display-chords .mbp-chord-control-playing,
#table-display-chords .mbp-chord-control-playing .mbp-chord-roman {
    color: var(--mbp-playback-highlight, #f3c84b) !important;
    filter: drop-shadow(0 0 3px rgba(243, 200, 75, 0.65));
}

#table-display-chords .mbp-chord-separator {
    margin: 0 0.28em;
    color: rgba(214, 168, 75, 0.72);
}