/* Keep the keyboard and routing panel in their desktop proportions. */
:root.vkey-uniform-fit {
    --vkey-design-vw: 12.8px;
    --vkey-design-vh: 7.2px;
    height: 100%;
    min-height: 0;
}

.vkey-uniform-fit body {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 0;
}

.vkey-uniform-fit #app-container {
    position: absolute;
    width: 1280px;
    height: 720px;
    min-height: 720px;
    transform-origin: top left;
}

.vkey-uniform-fit #keyboard-help {
    top: auto;
    bottom: calc(var(--vkey-top-zone-bottom) + var(--wheel-body-bottom-offset));
    margin-bottom: 0;
    left: 54%;
    width: 400px;
    max-width: 400px;
    line-height: 1.35;
}

/* Readable typography within the fixed design, scaled with the instrument. */
.vkey-uniform-fit #app-title { font-size: max(14px, clamp(1rem, calc(2.5 * var(--vkey-design-vw, 1vw)), 1.8rem)); }
.vkey-uniform-fit #midi-status { font-size: max(14px, clamp(0.7rem, calc(1.2 * var(--vkey-design-vw, 1vw)), 0.9rem)); }
.vkey-uniform-fit .scale-sub-label { font-size: max(14px, clamp(0.52rem, calc(0.76 * var(--vkey-design-vw, 1vw)), 0.62rem)); }
.vkey-uniform-fit .control-select { font-size: max(14px, clamp(0.64rem, calc(0.86 * var(--vkey-design-vw, 1vw)), 0.76rem)); }
.vkey-uniform-fit .control-label { font-size: max(14px, clamp(0.78rem, calc(1.15 * var(--vkey-design-vw, 1vw)), 1rem)); }
.vkey-uniform-fit .control-btn { font-size: max(14px, clamp(0.9rem, calc(1.3 * var(--vkey-design-vw, 1vw)), 1.1rem)); }
.vkey-uniform-fit .control-value { font-size: max(14px, clamp(1rem, calc(1.45 * var(--vkey-design-vw, 1vw)), 1.25rem)); }
.vkey-uniform-fit .device-label { font-size: max(14px, clamp(0.62rem, calc(0.98 * var(--vkey-design-vw, 1vw)), 0.8rem)); }
.vkey-uniform-fit .device-select { font-size: max(14px, clamp(0.68rem, calc(1.05 * var(--vkey-design-vw, 1vw)), 0.86rem)); }
.vkey-uniform-fit .device-toggle-button { font-size: max(14px, clamp(0.62rem, calc(1 * var(--vkey-design-vw, 1vw)), 0.8rem)); }
.vkey-uniform-fit .white-key { font-size: max(14px, clamp(0.6rem, calc(1.5 * var(--vkey-design-vw, 1vw)), 0.9rem)); }
.vkey-uniform-fit .black-key { font-size: max(14px, clamp(0.5rem, calc(1.2 * var(--vkey-design-vw, 1vw)), 0.8rem)); }
.vkey-uniform-fit #keyboard-help { font-size: max(14px, clamp(0.5rem, calc(1 * var(--vkey-design-vw, 1vw)), 0.65rem)); }
.vkey-uniform-fit .wheel-value { font-size: max(14px, clamp(0.5rem, calc(1 * var(--vkey-design-vw, 1vw)), 0.7rem)); }
.vkey-uniform-fit .current-note { font-size: max(14px, clamp(1rem, calc(2 * var(--vkey-design-vw, 1vw)), 1.5rem)); }
.vkey-uniform-fit .current-midi { font-size: max(14px, clamp(0.7rem, calc(1.2 * var(--vkey-design-vw, 1vw)), 0.9rem)); }
.vkey-uniform-fit .fullscreen-btn { font-size: max(14px, 0.8rem); }