.status-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--statusbar-height, 28px);
    --statusbar-handle-size: 18px;
    --statusbar-handle-gutter: 10px;
    --statusbar-handle-safe-zone: 2px;
    --statusbar-song-slot-width: clamp(150px, 20vw, 230px);
    --statusbar-sustain-width: 128px;
    --statusbar-left-group-width: calc(var(--statusbar-song-slot-width) + var(--statusbar-sustain-width) + var(--space-3, 12px));
    z-index: 14;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3, 12px);
    padding: 0 calc(var(--space-3, 12px) + var(--statusbar-handle-size) + var(--statusbar-handle-gutter)) 0 var(--space-3, 12px);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(17, 18, 20, 0.94);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.45);
    color: var(--text-2, rgba(255, 255, 255, 0.72));
    font-family: var(--font-system, system-ui, -apple-system, sans-serif);
    font-size: var(--font-sm, 11px);
    line-height: 1.2;
    letter-spacing: 0.01em;
    contain: layout paint style;
    pointer-events: auto;
    --statusbar-handle-line-width: 1.5px;
    --statusbar-handle-line-soft: rgba(255, 255, 255, 0.42);
    --statusbar-handle-line-mid: rgba(255, 255, 255, 0.64);
    --statusbar-handle-line-strong: rgba(255, 255, 255, 0.9);
}

.status-bar__group {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--space-3, 12px);
}

.status-bar__group--left {
    flex: 0 1 var(--statusbar-left-group-width);
    max-width: var(--statusbar-left-group-width);
}

.status-bar__group--right {
    justify-content: flex-end;
    flex: 0 1 auto;
}

.status-bar__item {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1, 4px);
    white-space: nowrap;
}

.status-bar__item--song {
    flex: 0 0 var(--statusbar-song-slot-width);
}

.status-bar__sustain-indicator {
    flex: 0 0 var(--statusbar-sustain-width);
    width: var(--statusbar-sustain-width);
    height: 26px;
    min-width: var(--statusbar-sustain-width);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-md, 6px);
    background: rgba(255, 255, 255, 0.03);
    color: rgba(245, 248, 252, 0.62);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0;
    pointer-events: none;
    contain: layout paint style;
}

.status-bar__sustain-pedal {
    width: 18px;
    height: 11px;
    border: 1px solid currentColor;
    border-radius: 3px 3px 6px 6px;
    transform: skewX(-12deg);
    opacity: 0.72;
}

.status-bar__sustain-label {
    line-height: 1;
}

.status-bar__sustain-light {
    width: 7px;
    height: 7px;
    margin-left: auto;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    box-shadow: none;
}

.status-bar__sustain-indicator.active {
    color: rgba(255, 246, 220, 0.92);
    border-color: rgba(255, 180, 82, 0.34);
    background: rgba(18, 15, 10, 0.78);
}

.status-bar__sustain-indicator.active .status-bar__sustain-light {
    background: #ffb24a;
    box-shadow: 0 0 9px rgba(255, 178, 74, 0.72);
}

.status-bar__value {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-1, rgba(255, 255, 255, 0.92));
}

.status-bar__value--song {
    max-width: 100%;
    white-space: nowrap;
}

.status-bar__label {
    color: var(--text-3, rgba(255, 255, 255, 0.45));
    font-weight: 600;
    font-size: var(--font-xs, 10px);
    letter-spacing: 0.04em;
}

.status-bar__keyboard-controls {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    padding: 0 28px 0 var(--space-3, 12px);
    margin-left: var(--space-1, 4px);
    border-left: 1px solid rgba(255, 255, 255, 0.12);
    --range-width: 64px;
}

.status-bar__keyboard-label {
    flex: 0 0 auto;
    font-size: var(--font-xs, 10px);
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-3, rgba(255, 255, 255, 0.4));
}

.status-bar__select {
    flex: 0 1 auto;
    height: 28px;
    max-width: 128px;
    font-size: var(--font-md, 12px);
    border-radius: var(--radius-md, 6px);
}

.status-bar__preset-select {
    width: min(18vw, 132px);
}

.status-bar__volume {
    flex: 0 0 auto;
}

.status-bar__volume-value {
    flex: 0 0 4ch;
    color: var(--text-1, rgba(255, 255, 255, 0.92));
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.status-bar__mute {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    margin-right: calc(var(--statusbar-handle-size) + 14px);
    border-radius: var(--radius-md, 6px);
}

.status-bar__mute svg {
    width: 16px;
    height: 16px;
}

.status-bar__mute.is-muted {
    color: var(--status-warn, #ffab40);
}

.status-bar__window-resize-grip {
    position: absolute;
    pointer-events: none;
    right: 2px;
    bottom: 2px;
    width: var(--statusbar-handle-size);
    height: var(--statusbar-handle-size);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cline x1='0' y1='18' x2='18' y2='0' stroke='rgba(0,0,0,0.8)' stroke-width='1.6' transform='translate(-0.5,-0.5)'/%3E%3Cline x1='0' y1='18' x2='18' y2='0' stroke='rgba(255,255,255,0.46)' stroke-width='1.6' transform='translate(0.5,0.5)'/%3E%3Cline x1='0' y1='18' x2='18' y2='0' stroke='rgba(255,255,255,0.14)' stroke-width='1.6'/%3E%3Cline x1='6' y1='18' x2='18' y2='6' stroke='rgba(0,0,0,0.8)' stroke-width='1.6' transform='translate(-0.5,-0.5)'/%3E%3Cline x1='6' y1='18' x2='18' y2='6' stroke='rgba(255,255,255,0.46)' stroke-width='1.6' transform='translate(0.5,0.5)'/%3E%3Cline x1='6' y1='18' x2='18' y2='6' stroke='rgba(255,255,255,0.14)' stroke-width='1.6'/%3E%3Cline x1='12' y1='18' x2='18' y2='12' stroke='rgba(0,0,0,0.8)' stroke-width='1.6' transform='translate(-0.5,-0.5)'/%3E%3Cline x1='12' y1='18' x2='18' y2='12' stroke='rgba(255,255,255,0.46)' stroke-width='1.6' transform='translate(0.5,0.5)'/%3E%3Cline x1='12' y1='18' x2='18' y2='12' stroke='rgba(255,255,255,0.14)' stroke-width='1.6'/%3E%3C/g%3E%3Cg fill='rgba(255,255,255,0.2)'%3E%3Crect x='11' y='11' width='1.2' height='1.2'/%3E%3Crect x='13' y='11' width='1.2' height='1.2'/%3E%3Crect x='15' y='11' width='1.2' height='1.2'/%3E%3Crect x='11' y='13' width='1.2' height='1.2'/%3E%3Crect x='13' y='13' width='1.2' height='1.2'/%3E%3Crect x='15' y='13' width='1.2' height='1.2'/%3E%3Crect x='11' y='15' width='1.2' height='1.2'/%3E%3Crect x='13' y='15' width='1.2' height='1.2'/%3E%3Crect x='15' y='15' width='1.2' height='1.2'/%3E%3C/g%3E%3Cg fill='rgba(0,0,0,0.28)'%3E%3Crect x='10.4' y='10.4' width='0.9' height='0.9'/%3E%3Crect x='12.4' y='10.4' width='0.9' height='0.9'/%3E%3Crect x='14.4' y='10.4' width='0.9' height='0.9'/%3E%3Crect x='10.4' y='12.4' width='0.9' height='0.9'/%3E%3Crect x='12.4' y='12.4' width='0.9' height='0.9'/%3E%3Crect x='14.4' y='12.4' width='0.9' height='0.9'/%3E%3Crect x='10.4' y='14.4' width='0.9' height='0.9'/%3E%3Crect x='12.4' y='14.4' width='0.9' height='0.9'/%3E%3Crect x='14.4' y='14.4' width='0.9' height='0.9'/%3E%3C/g%3E%3C/svg%3E");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 15;
    contain: strict;
}

@media (min-width: 900px) {
    .status-bar {
        font-size: var(--font-md, 12px);
    }
}

@media (max-width: 820px) {
    .status-bar {
        --statusbar-song-slot-width: clamp(108px, 24vw, 160px);
        --statusbar-sustain-width: 51px;
        --statusbar-left-group-width: calc(var(--statusbar-song-slot-width) + var(--statusbar-sustain-width) + var(--space-2, 8px));
        gap: var(--space-2, 8px);
        padding: 0 calc(var(--space-2, 8px) + var(--statusbar-handle-size) + var(--statusbar-handle-gutter)) 0 var(--space-2, 8px);
    }

    .status-bar__group {
        gap: var(--space-2, 8px);
    }

    .status-bar__sustain-indicator {
        gap: var(--space-1, 4px);
    }

    .status-bar__sustain-label {
        display: none;
    }

    .status-bar__keyboard-controls {
        gap: var(--space-1, 4px);
        --range-width: 52px;
    }

    .status-bar__keyboard-label {
        display: none;
    }

    .status-bar__select {
        max-width: 92px;
    }

    .status-bar__preset-select {
        width: min(24vw, 104px);
    }
}

@media (max-width: 560px) {
    .status-bar {
        --statusbar-song-slot-width: clamp(84px, 32vw, 120px);
        --statusbar-handle-gutter: 14px;
    }

    .status-bar__group--right > .status-bar__item {
        display: none;
    }

    .status-bar__keyboard-controls {
        --range-width: 44px;
        padding: 0 0 0 var(--space-1, 4px);
        margin-left: 0;
    }

    .status-bar__select {
        max-width: 76px;
    }

    .status-bar__preset-select {
        width: min(19vw, 76px);
    }

    .status-bar__volume-value {
        display: none;
    }

    .status-bar__mute {
        flex: 0 0 24px;
        width: 24px;
        height: 24px;
        margin-right: calc(var(--statusbar-handle-size) + 64px);
    }

    .status-bar__mute svg {
        width: 14px;
        height: 14px;
    }
}