/* Tuner */

.tuner-strings {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: var(--button-gap);
}

.tuner-strings[hidden] {
    display: none;
}

.tuner-strings button {
    min-width: 0;
    padding-inline: 0;
}

.tuner-strings button.is-playing {
    border-color: var(--target);
    color: var(--target);
}

.tuner-header,
.tuner-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: left;
}

.tuner-header {
    min-height: 58px;
}

.tuner-note {
    font-size: 32px;
    font-weight: 700;
    line-height: 1;

    font-variant-numeric: tabular-nums;
}

.tuner-target-frequency,
.tuner-detected-frequency {
    margin-top: 6px;

    color: var(--muted);

    font-size: 12px;
    line-height: 1.2;
}

.tuner-gauge {
    padding-top: 4px;
    padding-bottom: 8px;
}

.tuner-scale {
    position: relative;

    height: 16px;

    margin-bottom: 4px;

    color: var(--muted);

    font-size: 10px;
    line-height: 1;

    font-variant-numeric: tabular-nums;
}

.tuner-scale-left,
.tuner-scale-center,
.tuner-scale-right {
    position: absolute;
}

.tuner-scale-left {
    left: 0;
}

.tuner-scale-center {
    left: 50%;

    transform: translateX(-50%);
}

.tuner-scale-right {
    right: 0;
}

.tuner-track {
    position: relative;

    height: 28px;

    border: 1px solid var(--border);
    border-radius: var(--border-radius);

    background: var(--surface);
}

/*
 * Each tick represents 10 cents:
 *
 * 10% = -40
 * 20% = -30
 * 30% = -20
 * 40% = -10
 * 50% =   0
 * 60% = +10
 * 70% = +20
 * 80% = +30
 * 90% = +40
 */
.tuner-tick {
    position: absolute;

    top: 8px;
    bottom: 8px;

    width: 1px;

    background: #555;

    transform: translateX(-50%);
}

.tuner-tick-center {
    top: 4px;
    bottom: 4px;

    width: 2px;

    background: #888;
}

.tuner-needle {
    position: absolute;
    z-index: 2;

    top: -5px;
    bottom: -5px;
    left: 50%;

    width: 3px;

    opacity: 0;

    background-color: var(--mic-accent);

    transform: translateX(-50%);

    transition:
        left 120ms ease-out,
        opacity 120ms linear,
        background-color 120ms linear;
}

.tuner-needle.is-visible {
    opacity: 1;
}

.tuner-needle.is-in-tune {
    background-color: var(--correct);
}

.tuner-footer {
    min-height: 40px;
}

.tuner-cents {
    font-size: 21px;
    font-weight: 600;
    line-height: 1;

    font-variant-numeric: tabular-nums;
}

.tuner-history {
    height: 144px;

    display: block;

    border-radius: var(--border-radius);

    background: var(--surface);
}

/* Rhythm */

.rhythm-time-signature {
    font-family: 'Noto Music', serif;
}

.rhythm-beat-track {
    position: relative;

    height: 28px;

    border: 1px solid var(--border);
    border-radius: var(--border-radius);

    background: var(--surface);
}

.rhythm-beat-target,
.rhythm-timing-mark {
    position: absolute;

    top: 0;
    left: 50%;

    width: 2px;
    height: 100%;

    background: var(--target);
}

.rhythm-timing-mark {
    top: auto;
    bottom: 0;

    height: 8px;

    background: currentcolor;
}

.rhythm-timing-mark::before {
    content: attr(data-label);

    position: absolute;

    bottom: calc(100% + 2px);
    left: 50%;

    color: currentcolor;

    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;

    transform: translateX(-50%);
}

.rhythm-beat-dot {
    position: absolute;

    top: 50%;
    left: 0;

    width: 12px;
    height: 12px;

    border-radius: 50%;

    background: var(--target);

    transform: translate(-50%, -50%);
}

.rhythm-beat-labels {
    margin-top: 4px;

    display: flex;
    justify-content: flex-start;

    color: var(--muted);

    font-size: 10px;
}

.rhythm-timing-tap {
    width: var(--control-width);
    max-width: 100%;

    touch-action: none;
}

.rhythm-sheet-hold {
    width: 100%;

    touch-action: none;
}

.rhythm-sheet-hold.is-held {
    border-color: var(--target);

    background: var(--target-background);
}

.rhythm-sheet-count-in {
    min-height: 18px;

    display: flex;
    align-items: center;

    color: var(--muted);

    font-size: 12px;
}

/* MIDI */

main.is-drag-over::after {
    position: fixed;
    z-index: 1000;
    inset: 4px;

    border-radius: var(--border-radius);
    border: 2px dashed var(--target);

    pointer-events: none;

    content: '';
}

.soundfont-status {
    display: block;

    margin: 0.25rem 0 0;

    color: var(--incorrect);

    font-size: 12px;
}

.midi-status {
    display: block;

    white-space: pre-line;
}

.midi-status.is-loading,
#rhythm-sheet-count-label.is-loading {
    color: var(--incorrect);
}

.midi-status + .soundfont-status {
    margin-top: 0;
}

.midi-file-controls {
    width: var(--control-width);
    max-width: 100%;

    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: var(--button-gap);
}

.midi-file-controls select {
    width: 100%;
    min-width: 0;
}

.control-row select[data-control='shared-soundfont'] {
    width: var(--control-width);
}

.midi-visualize-tracks {
    --sheet-heading-gap: 2rem;

    display: grid;
    gap: 16px;
}

.midi-visualize-tracks[hidden],
.midi-tracker[hidden] {
    display: none;
}

.midi-visualize-track {
    display: block;
}

.midi-visualize-track-body {
    min-height: 0;
}

.midi-visualize-track-body,
.midi-visualize-track-header {
    display: grid;
    grid-template-columns: 1.25rem minmax(0, 1fr);
    column-gap: 0.3rem;
}

.midi-visualize-track .midi-visualize-track-body[hidden] {
    display: none;
}

.midi-visualize-track-heading,
.midi-visualize-track-content {
    grid-column: 2;
}

.midi-visualize-track-toggle {
    width: 100%;
    height: auto;
    min-height: 0;

    min-width: 0;
    padding: 0;

    border: 0;
    border-radius: var(--border-radius);

    background: var(--correct);

    cursor: pointer;
}

.midi-visualize-track-toggle[aria-pressed='false'] {
    background: var(--incorrect);
}

@media (hover: hover) {
    .midi-visualize-track-toggle:hover:not(:disabled) {
        background: var(--correct);
    }

    .midi-visualize-track-toggle[aria-pressed='false']:hover:not(:disabled) {
        background: var(--incorrect);
    }
}

.midi-visualize-track-header {
    margin-bottom: 5px;

    align-items: center;
}

[data-action^='midi-'][data-action$='-attach'] {
    width: 32px;
}

[data-action^='midi-'][data-action$='-play'] > span {
    display: inline-block;
    transform: scaleX(1.2);
}

.midi-visualize-time-row {
    margin: 0 0 0.5rem;

    display: flex;
    gap: 0.6rem;

    align-items: center;

    color: var(--muted);

    font-size: 0.7rem;
    line-height: 1.25;

    font-variant-numeric: tabular-nums;
}

.midi-visualize-time-row[hidden] {
    display: none;
}

.midi-visualize-time-row > span {
    height: 16px;

    display: flex;
    align-items: center;
}

.practice input.midi-visualize-seek {
    flex: 1;

    width: auto;
    min-width: 3rem;
    height: 16px;
    margin: 0;
    padding: 0;
}

.midi-visualize-track-heading {
    margin: 0;

    color: var(--muted);

    font-size: 12px;
    font-weight: 600;
}

.midi-visualize-track-minimize {
    width: 100%;
    height: 1.25rem;
    padding: 0;

    font-size: 16px;
    line-height: 1;
}

.midi-visualize-track-minimize > span {
    display: block;

    transform: translateY(-0.1rem);
}

.midi-visualize-track-scores {
    display: grid;
    gap: 4px;
}

.midi-visualize-track-scores:empty {
    display: none;
}

.midi-visualize-track-scores[hidden] {
    display: none;
}

.midi-visualize-track-content[hidden] {
    display: none;
}

.midi-visualize-track-content > .practice-note {
    margin-top: 0;
}

.midi-visualize-tracks .sheet-score {
    height: 8rem;
    margin-bottom: 4rem;
}

.midi-tracker {
    --midi-tracker-keyboard-width: 6rem;
    --midi-tracker-row-height: 1rem;
    --midi-tracker-header-clearance: 5rem;
}

.midi-tracker-stage {
    display: grid;
    grid-template-columns: var(--midi-tracker-keyboard-width) minmax(0, 1fr);

    max-height: calc(
        100dvh - var(--midi-tracker-header-clearance) - var(--footer-height) -
            var(--main-padding) - 0.5rem
    );

    overflow-x: hidden;
    overflow-y: auto;
    overflow-anchor: none;

    border: 1px solid var(--border);
    border-radius: var(--border-radius);

    background: var(--surface);
}

.midi-tracker-keyboard,
.midi-tracker-roll {
    position: relative;
}

.midi-tracker-keyboard {
    border-right: 2px solid #777;

    background: var(--surface);

    touch-action: none;
    user-select: none;
}

.midi-tracker-roll {
    overflow: hidden;
}

.midi-tracker-key,
.midi-tracker-row {
    position: absolute;
    right: 0;

    box-sizing: border-box;
    height: var(--midi-tracker-row-height);
}

.midi-tracker-key {
    appearance: none;

    width: 100%;
    padding-right: 0.35rem;

    border: 0;
    border-bottom: 1px solid #777;
    border-radius: 0;

    color: #333;
    background: #eee;

    font-family: inherit;
    font-size: 0.625rem;
    line-height: var(--midi-tracker-row-height);
    text-align: right;

    cursor: pointer;
}

.midi-tracker-key.is-black {
    border-color: #000;

    color: #ddd;
    background: #000;
}

.midi-tracker-key:hover {
    background: #f6f6f6;
}

.midi-tracker-key.is-black:hover {
    background: #333;
}

.midi-tracker-key.is-active {
    background: linear-gradient(to right, #eee 35%, var(--target) 35%);
}

.midi-tracker-key.is-black.is-active {
    background: linear-gradient(to right, #000 35%, var(--target) 35%);
}

.midi-tracker-key.is-auditioned,
.midi-tracker-key.is-black.is-auditioned {
    color: #222;
    background: var(--warning);
}

.midi-tracker-key.is-auditioned.is-active {
    background: linear-gradient(
        to right,
        var(--warning) 35%,
        var(--target) 35%
    );
}

.midi-tracker-key.is-struck {
    animation: midi-tracker-key-strike 120ms ease-out;
}

@keyframes midi-tracker-key-strike {
    from {
        filter: brightness(1.75);
    }

    to {
        filter: brightness(1);
    }
}

.midi-tracker-rows,
.midi-tracker-timeline {
    position: absolute;
    inset: 0 auto auto 0;
}

.midi-tracker-rows {
    width: 100%;
}

.midi-tracker-row {
    left: 0;

    width: 100%;

    border-bottom: 1px solid #3b3b3b;
}

.midi-tracker-row.is-black {
    background: #161616;
}

.midi-tracker-timeline {
    will-change: transform;

    background-image: linear-gradient(to right, #555 1px, transparent 1px);
    background-size: var(--midi-tracker-quarter-width) 100%;
}

.midi-tracker-barline {
    position: absolute;
    top: 0;
    bottom: 0;

    width: 2px;

    background: #777;
}

.midi-tracker-signature {
    position: absolute;
    top: 0.125rem;

    padding: 0 0.2rem;

    color: var(--text);
    background: var(--surface);

    font-size: 0.625rem;
    line-height: 1rem;

    transform: translateX(2px);
}

.midi-tracker-note {
    position: absolute;

    min-height: 1px;

    border-radius: 2px;

    background: var(--midi-track-color);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 20%);

    opacity: 0.95;

    transition: opacity 100ms ease;
}

.midi-tracker-note.is-disabled {
    opacity: 0.2;
}

.midi-tracker-note.is-previewed {
    opacity: 0.55;
}

.midi-tracker-legend {
    grid-column: 1 / -1;

    margin: 0;
    padding: 0.25rem 0.5rem;

    display: flex;
    flex-wrap: wrap;
    gap: 0 0.75rem;

    border-top: 1px solid var(--border);

    list-style: none;
}

.midi-tracker-legend li {
    min-width: 0;
    max-width: 100%;

    flex: none;

    display: flex;
    gap: 0.2rem;
    align-items: center;

    color: var(--muted);

    font-size: 0.75rem;
}

.midi-tracker-legend li.is-disabled {
    opacity: 0.4;
}

.midi-tracker-legend .midi-tracker-legend-break {
    height: 0;

    flex: 0 0 100%;
}

.midi-tracker-legend-label {
    min-width: 0;

    overflow-wrap: anywhere;
}

.midi-tracker-instrument {
    position: relative;

    min-width: 0;
    max-width: 100%;

    display: flex;
    gap: 0.25rem;
    align-items: center;

    cursor: pointer;
}

.midi-tracker-instrument::after {
    font-size: 12px;
    content: '▾';

    color: #777;
}

.midi-tracker-instrument:focus-within {
    outline: 2px solid var(--target);
    outline-offset: 2px;
}

.midi-tracker-instrument-select {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    opacity: 0;
    cursor: pointer;
}

.midi-tracker-instrument-select:disabled {
    cursor: default;
}

.midi-tracker-instrument-select:focus-visible {
    outline: 0;
}

.midi-tracker-legend .midi-tracker-legend-toggle {
    width: 1.25rem;
    min-width: 0;
    height: 1.5rem;
    min-height: 0;
    padding: 0.25rem;

    flex: none;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 0;

    background: transparent;
}

.midi-tracker-legend-swatch {
    width: 0.75rem;
    height: 0.75rem;

    border-radius: 2px;

    background: var(--midi-track-color);

    transition:
        box-shadow 100ms ease,
        filter 100ms ease,
        transform 100ms ease;
}

.midi-tracker-legend li.is-playing .midi-tracker-legend-swatch {
    box-shadow: 0 0 0.4rem var(--midi-track-color);
    filter: brightness(1.35) saturate(1.25);
    transform: scale(1.2);
}

.midi-tracker-legend li.is-switching .midi-tracker-legend-swatch {
    animation: midi-tracker-legend-switch 160ms ease-out;
}

@keyframes midi-tracker-legend-switch {
    from {
        box-shadow: 0 0 0.7rem var(--midi-track-color);
        filter: brightness(1.9) saturate(1.45);
        transform: scale(1.45);
    }
}

.sheet-score {
    --sheet-play-line-position: 25%;
    --sheet-beam-thickness: 0.24rem;
    --sheet-notehead-y: 5.25rem;
    --sheet-stem-length: 1.75rem;
    --sheet-beam-width-extension: 0.0625rem;
    --sheet-beam-stem-inset: 0.0625rem;
    --sheet-up-stem-x: 0.95rem;
    --sheet-up-beam-x: 0.95rem;
    --sheet-up-note-y: -0.125rem;
    --sheet-up-layout-y: 0.0625rem;
    --sheet-up-stem-note-inset: 0.125rem;
    --sheet-down-stem-x: 0.5rem;
    --sheet-down-beam-x: 0.5rem;
    --sheet-down-note-y: -0.0625rem;
    --sheet-down-layout-y: 0;
    --sheet-down-stem-note-inset: 0.0625rem;

    position: relative;

    width: 66.6667%;
    height: 8.25rem;
    margin-bottom: 4.125rem;

    border: 1px solid var(--border);
    border-radius: var(--border-radius);

    background: var(--surface);

    font-family: 'Noto Music', serif;

    overflow: hidden;

    transform: scale(1.5);
    transform-origin: top left;
}

#rhythm-sheet-score {
    --sheet-heading-gap: 1.6rem;
}

.sheet-staff {
    position: absolute;
    inset: 2.25rem 0 auto;

    height: 3rem;

    pointer-events: none;
}

.sheet-staff > span {
    position: absolute;
    right: 0;
    left: 0;

    height: 1px;

    background: var(--muted);
}

.sheet-staff > span:nth-child(1) {
    top: 0;
}

.sheet-staff > span:nth-child(2) {
    top: 0.75rem;
}

.sheet-staff > span:nth-child(3) {
    top: 1.5rem;
}

.sheet-staff > span:nth-child(4) {
    top: 2.25rem;
}

.sheet-staff > span:nth-child(5) {
    top: 3rem;
}

.sheet-lane {
    position: absolute;
    inset: 0;

    will-change: transform;
}

.sheet-lane-note {
    position: absolute;

    top: 0;

    height: 100%;

    color: var(--text);
}

.sheet-note-symbol {
    position: absolute;

    top: calc(3.825rem - var(--staff-step, 3) * 0.375rem);
    left: 0.4rem;

    font-size: 1.75rem;
    line-height: 1;

    white-space: nowrap;
}

.sheet-note-symbol:not(.is-whole):not(.is-stem-down) {
    top: calc(3.8rem - var(--staff-step, 3) * 0.375rem);
}

.sheet-note-symbol.is-stem-down {
    top: calc(5rem - var(--staff-step) * 0.375rem);

    transform: rotate(180deg);
}

.sheet-note-symbol.is-beamed {
    top: calc(3.725rem - var(--staff-step) * 0.375rem);

    font-family: 'Noto Music', serif;

    transform: none;
}

.sheet-note-symbol.is-beamed.is-stem-down {
    top: calc(3.7875rem - var(--staff-step) * 0.375rem);
}

.sheet-note-accidental {
    position: absolute;

    top: calc(4.5rem - var(--staff-step) * 0.375rem);
    left: -0.25rem;

    font-size: 1.5rem;
    line-height: 1;
}

.sheet-beam {
    position: absolute;
    z-index: 1;

    height: var(--sheet-beam-thickness);

    background: var(--text);

    pointer-events: none;
}

.sheet-beam-stem {
    position: absolute;
    z-index: 1;

    width: 1px;

    background: var(--text);

    pointer-events: none;
}

.sheet-lane-note.is-rest .sheet-note-symbol {
    top: 2.85rem;

    font-size: 2rem;
}

.sheet-lane-note.is-rest .sheet-note-symbol.is-whole,
.sheet-lane-note.is-rest .sheet-note-symbol.is-half {
    top: 3.1rem;

    font-size: 1.75rem;
}

.sheet-lane-note.is-rest .sheet-note-symbol.is-multiple-measure {
    top: 3.15rem;

    font-size: 1.5rem;
}

.sheet-note-dot {
    position: absolute;

    top: calc(5.1rem - var(--staff-step) * 0.375rem);
    left: 1.75rem;

    width: 0.22rem;
    height: 0.22rem;

    border-radius: 50%;

    background: currentcolor;
}

.sheet-note-octave {
    position: absolute;
    left: 0.25rem;

    color: var(--muted);

    font-family: system-ui, sans-serif;
    font-size: 0.65rem;
    line-height: 1;
}

.sheet-note-octave.is-above {
    top: 0.25rem;
}

.sheet-note-octave.is-below {
    bottom: 0.25rem;
}

.sheet-ledger-line {
    position: absolute;

    top: calc(5.25rem - var(--staff-step) * 0.375rem);
    left: 0.05rem;

    width: 2rem;
    height: 1.5px;

    background: var(--muted);
}

.sheet-score-heading {
    position: absolute;

    top: 1.75rem;

    height: 4.5rem;

    display: flex;
    align-items: center;

    gap: 0.4rem;

    white-space: nowrap;

    color: var(--text);

    transform: translateX(calc(-100% - var(--sheet-heading-gap, 1rem)));
}

.sheet-clef,
.sheet-barline {
    display: flex;
    align-items: center;

    height: 100%;

    overflow: hidden;

    font-size: 3.25rem;
    line-height: 1;

    transform: scaleY(1.125);
    transform-origin: center;
}

.sheet-clef {
    flex: none;

    overflow: visible;
}

.sheet-clef-bass {
    font-size: 3rem;
}

.sheet-clef-alto,
.sheet-clef-tenor,
.sheet-clef-percussion {
    font-size: 2.75rem;
}

.sheet-clef-tenor {
    position: relative;
    top: -0.75rem;
}

.sheet-signature {
    height: 3rem;

    overflow: hidden;
}

.sheet-signature:not(.is-numeric) {
    display: flex;
    align-items: center;

    font-size: 2.5rem;
    line-height: 1;
}

.sheet-signature.is-numeric {
    display: grid;
    grid-template-rows: repeat(2, 1.5rem);
    align-content: center;

    text-align: center;

    font-size: 1.25rem;
    line-height: 1.5rem;
}

.sheet-count-marker.is-current,
.sheet-lane-note.is-current,
.sheet-tie.is-current {
    color: var(--target);
}

.sheet-tie {
    position: absolute;
    z-index: 1;

    height: 0.7rem;

    border-color: currentcolor;
    border-style: solid;
    border-width: 0;

    color: var(--text);

    pointer-events: none;
}

.sheet-tie.is-above {
    top: calc(4.475rem - var(--staff-step) * 0.375rem);

    border-top-width: 2px;
    border-radius: 50% 50% 0 0;
}

.sheet-tie.is-below {
    top: calc(5.225rem - var(--staff-step) * 0.375rem);

    border-bottom-width: 2px;
    border-radius: 0 0 50% 50%;
}

.rhythm-sheet-duration-track,
.rhythm-sheet-feedback-section {
    position: absolute;

    bottom: 0;
    left: 0;

    height: 0.25rem;
}

.rhythm-sheet-duration-track {
    width: calc(100% - 1px);

    background: var(--target);
}

.rhythm-sheet-feedback-section {
    z-index: 1;

    pointer-events: none;
}

.sheet-lane-note.is-rest .rhythm-sheet-duration-track {
    background: transparent;
}

.rhythm-sheet-feedback-section.is-correct {
    background: var(--correct);
}

.rhythm-sheet-feedback-section.is-pitch-missed {
    background: var(--warning);
}

.rhythm-sheet-feedback-section.is-missed {
    background: var(--incorrect);
}

.sheet-count-marker {
    position: absolute;
    top: 0.15rem;

    line-height: 1rem;

    color: var(--muted);

    transform: translateX(-50%);
}

.sheet-play-line {
    position: absolute;

    top: 2rem;
    left: var(--sheet-play-line-position, var(--control-width));

    width: 1px;
    height: 3.5rem;

    background: var(--target);

    pointer-events: none;
}

.sheet-pitch-line {
    position: absolute;
    z-index: 2;

    top: calc(5.25rem - var(--staff-step) * 0.375rem);
    left: var(--sheet-play-line-position, var(--control-width));

    width: 2rem;
    height: 1px;

    background: var(--mic-accent);

    transform: translate(-50%, -50%);
    transition: top 50ms linear;

    pointer-events: none;
}

.sheet-barline {
    position: absolute;

    top: 1.75rem;

    height: 4rem;

    font-size: 3.75rem;

    color: var(--muted);

    transform: translateX(-50%) scaleY(1.125);
}

.sheet-bar-glide {
    position: absolute;

    bottom: 0;

    display: flex;
    align-items: center;
    justify-content: space-between;

    color: var(--warning);

    font-family: system-ui, sans-serif;
    font-size: 8px;
    font-weight: 700;
    line-height: 12px;

    pointer-events: none;
}

.sheet-bar-glide > span {
    position: relative;
    top: 3px;
}

.sheet-score[aria-disabled='false'] {
    cursor: pointer;
    touch-action: none;
}

/* Pitch */

.pitch-memory-pitch-scale {
    position: relative;
    display: flow-root;
}

.pitch-memory-pitch-markers {
    position: absolute;
    z-index: 2;
    inset: 4px 8px 10px;

    pointer-events: none;
}

.pitch-memory-pitch-marker {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;

    width: 3px;

    pointer-events: none;
    transform: translateX(-1.5px);
}

.pitch-memory-pitch-scale input.has-result::-webkit-slider-thumb {
    opacity: 0;
}

.pitch-memory-pitch-scale input.has-result::-moz-range-thumb {
    opacity: 0;
}

/* Intervals */

.interval-guide-table {
    width: 100%;

    border-collapse: collapse;
}

.interval-guide-table th,
.interval-guide-table td {
    padding: 4px 7px;

    border: 1px solid var(--border);

    text-align: left;
}

.interval-guide-table th {
    font-weight: 600;
}

.interval-guide-table td:nth-child(2) {
    color: var(--muted);
}

.interval-guide-table td:last-child {
    white-space: nowrap;
}

@media (max-width: 800px) {
    .midi-tracker {
        --midi-tracker-header-clearance: 8rem;
    }
}

@media (max-width: 560px) {
    .midi-tracker {
        --midi-tracker-keyboard-width: 4.75rem;
    }

    .tuner-note {
        font-size: 28px;
    }

    .tuner-cents {
        font-size: 19px;
    }
}

@media (max-width: 340px) {
    .midi-tracker {
        --midi-tracker-header-clearance: 12rem;
    }
}