/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-flmsvd3y5s] { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.site-header[b-flmsvd3y5s] { background: #101010; border-bottom: 1px solid #303030; }
main[b-flmsvd3y5s] { flex: 1; min-width: 0; width: 100%; padding: 0 12px; }
.site-footer[b-flmsvd3y5s] { display: flex; align-items: center; gap: 24px; padding: 22px 32px; background: #101010; color: #a5aaa7; font-size: .8rem; line-height: 1.6; border-top: 1px solid #303030; }
.site-footer-brand[b-flmsvd3y5s] { flex: 0 0 auto; }
.site-footer-brand .db-logo[b-flmsvd3y5s] { width: 72px; }
.site-footer-copyright[b-flmsvd3y5s] { flex: 1; min-width: 0; padding-left: 24px; border-left: 1px solid #303030; }
.site-footer a[b-flmsvd3y5s] { flex: 0 0 auto; color: #b9c5bd; text-decoration: none; padding: 8px 0 8px 12px; }
.site-footer a:hover[b-flmsvd3y5s] { color: #68df94; text-decoration: underline; text-underline-offset: 4px; }
.site-footer a:focus-visible[b-flmsvd3y5s] { outline: 2px solid #68df94; outline-offset: 4px; border-radius: 2px; }
#blazor-error-ui[b-flmsvd3y5s] { color-scheme: light only; background: lightyellow; bottom: 0; box-shadow: 0 -1px 2px rgba(0,0,0,.2); box-sizing: border-box; display: none; left: 0; padding: .6rem 1.25rem .7rem; position: fixed; width: 100%; z-index: 1000; }
#blazor-error-ui .dismiss[b-flmsvd3y5s] { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }
@media (max-width: 600px) {
    main[b-flmsvd3y5s] { padding: 0; }
    .site-footer[b-flmsvd3y5s] { flex-wrap: wrap; gap: 12px 20px; padding: 20px; }
    .site-footer-brand[b-flmsvd3y5s] { flex: 1; }
    .site-footer-copyright[b-flmsvd3y5s] { order: 1; flex-basis: 100%; padding: 12px 0 0; border-left: 0; border-top: 1px solid #303030; }
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.top-nav[b-gwiguznmtg] { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 12px 24px; }
.brand img[b-gwiguznmtg] { display: block; width: 170px; max-width: 45vw; height: auto; }
.apps-dropdown[b-gwiguznmtg] { position: relative; color: #fff; }
summary[b-gwiguznmtg] { display: inline-flex; align-items: center; cursor: pointer; padding: 10px 13px; border: 1px solid #464646; border-radius: 8px; background: #202020; }
summary[b-gwiguznmtg]::-webkit-details-marker { display: none; }
summary[b-gwiguznmtg]::marker { content: ""; }
summary[b-gwiguznmtg]::after { content: "⌄"; margin-left: 8px; color: #9b9b9b; font-size: 1rem; line-height: 1; transform: translateY(-1px); }
summary .bi[b-gwiguznmtg] { margin-right: 6px; }
summary:hover[b-gwiguznmtg], .apps-dropdown[open] summary[b-gwiguznmtg] { background: #303030; }
.apps-list[b-gwiguznmtg] { position: absolute; right: 0; top: calc(100% + 10px); width: min(340px, calc(100vw - 32px)); max-height: 70vh; overflow-y: auto; padding: 8px; background: #171717; border: 1px solid #414141; border-radius: 12px; box-shadow: 0 16px 40px #0006; z-index: 100; }
.apps-list[b-gwiguznmtg]  .app-link { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-radius: 6px; color: #eee; text-decoration: none; }
.apps-list[b-gwiguznmtg]  .app-link:hover { background: #303a4a; color: #a9c7ff; }
.apps-list[b-gwiguznmtg]  .app-link.active { background: #1f6339; color: #9affbd; }
.apps-list[b-gwiguznmtg]  .app-link.active small { color: #c2f7d1; }
.apps-list small[b-gwiguznmtg] { display: block; color: #aaa; font-size: .75rem; }
.apps-list .bi[b-gwiguznmtg] { font-size: 1.2rem; }
.top-nav a:focus-visible[b-gwiguznmtg], summary:focus-visible[b-gwiguznmtg], .apps-list[b-gwiguznmtg]  a:focus-visible { outline: 2px solid #7cecaa; outline-offset: 3px; }
.skip-link[b-gwiguznmtg] { position: absolute; left: 12px; top: -100px; padding: 10px; background: #fff; z-index: 101; }
.skip-link:focus[b-gwiguznmtg] { top: 12px; }
@media (max-width: 600px) { .top-nav[b-gwiguznmtg] { padding: 12px 16px; } }
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-0epmdj8eqk],
.components-reconnect-repeated-attempt-visible[b-0epmdj8eqk],
.components-reconnect-failed-visible[b-0epmdj8eqk],
.components-pause-visible[b-0epmdj8eqk],
.components-resume-failed-visible[b-0epmdj8eqk],
.components-rejoining-animation[b-0epmdj8eqk] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-0epmdj8eqk],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-0epmdj8eqk],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-0epmdj8eqk],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-0epmdj8eqk],
#components-reconnect-modal.components-reconnect-retrying[b-0epmdj8eqk],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-0epmdj8eqk],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-0epmdj8eqk],
#components-reconnect-modal.components-reconnect-failed[b-0epmdj8eqk],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-0epmdj8eqk] {
    display: block;
}


#components-reconnect-modal[b-0epmdj8eqk] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-0epmdj8eqk 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-0epmdj8eqk 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-0epmdj8eqk 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-0epmdj8eqk]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-0epmdj8eqk 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-0epmdj8eqk {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-0epmdj8eqk {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-0epmdj8eqk {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-0epmdj8eqk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-0epmdj8eqk] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-0epmdj8eqk] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-0epmdj8eqk] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-0epmdj8eqk] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-0epmdj8eqk] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-0epmdj8eqk] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-0epmdj8eqk 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-0epmdj8eqk] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-0epmdj8eqk {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/Backing_Creator.razor.rz.scp.css */
.backing-page[b-m7cf55ts8e] {
    --backing-background-image: none;
    position: relative;
    width: calc(100% + 24px);
    margin-inline: -12px;
    min-height: 100dvh;
    padding: clamp(24px, 3vw, 48px);
    overflow-x: clip;
    color: #f6f7f8;
    background-color: #000;
    background-image: var(--backing-background-image);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    box-sizing: border-box;
    isolation: isolate;
}

    .backing-page.has-background-image[b-m7cf55ts8e]::after {
        position: absolute;
        z-index: -1;
        inset: 0;
        background: radial-gradient(circle at 75% 30%, rgba(188, 118, 51, 0.12), transparent 35%), linear-gradient(180deg, transparent 58%, rgba(4, 7, 10, 0.32));
        content: "";
        pointer-events: none;
    }

.backing-content[b-m7cf55ts8e] {
    width: min(100%, 880px);
    margin-inline: auto;
}

.backing-alert[b-m7cf55ts8e],
.backing-loading[b-m7cf55ts8e] {
    width: 100%;
}

.backing-loading[b-m7cf55ts8e] {
    padding: 20px 22px;
    border: 1px solid rgba(213, 159, 91, 0.45);
    border-radius: 12px;
    background: rgba(10, 14, 18, 0.86);
    backdrop-filter: blur(12px);
}

.backing-selector-bar[b-m7cf55ts8e],
.backing-summary-card[b-m7cf55ts8e],
.backing-actions[b-m7cf55ts8e],
.backing-settings-card[b-m7cf55ts8e] {
    border: 1px solid rgba(213, 159, 91, 0.46);
    border-radius: 12px;
    background: rgba(9, 13, 17, 0.82);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(13px);
    -webkit-backdrop-filter: blur(13px);
}

.backing-selector-bar[b-m7cf55ts8e] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 20px;
    width: 100%;
    padding: 16px 20px;
    box-sizing: border-box;
}

.backing-selector-progression[b-m7cf55ts8e] {
    grid-column: 1 / -1;
}

.backing-selector-group[b-m7cf55ts8e],
.backing-setting[b-m7cf55ts8e] {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    min-width: 0;
}

    .backing-selector-group label[b-m7cf55ts8e],
    .backing-setting label[b-m7cf55ts8e] {
        margin: 0;
        color: #e5ad69;
        font-weight: 600;
        white-space: nowrap;
    }

.backing-select[b-m7cf55ts8e],
.backing-small-input[b-m7cf55ts8e] {
    min-width: 0;
    height: 44px;
    padding: 9px 38px 9px 13px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 7px;
    outline: none;
    color: #f7f8f9;
    background-color: rgba(11, 15, 19, 0.9);
    box-sizing: border-box;
    transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
    color-scheme: dark;
}

.backing-select[b-m7cf55ts8e] {
    width: 100%;
}

.backing-small-input[b-m7cf55ts8e] {
    width: 120px;
    padding-right: 12px;
}

    .backing-select:hover[b-m7cf55ts8e],
    .backing-small-input:hover[b-m7cf55ts8e] {
        border-color: rgba(229, 173, 105, 0.68);
    }

    .backing-select:focus[b-m7cf55ts8e],
    .backing-small-input:focus[b-m7cf55ts8e] {
        border-color: #d59f5b;
        background-color: rgba(13, 18, 23, 0.98);
        box-shadow: 0 0 0 3px rgba(213, 159, 91, 0.18);
    }

.backing-select:disabled[b-m7cf55ts8e] {
    cursor: not-allowed;
    opacity: 0.55;
}

.backing-summary-card[b-m7cf55ts8e] {
    width: 100%;
    margin-top: 16px;
    padding: 20px;
    box-sizing: border-box;
}

    .backing-summary-card h1[b-m7cf55ts8e] {
        margin: 0 0 16px;
        color: #fff;
        font-size: clamp(2rem, 3vw, 2.75rem);
        font-weight: 500;
        line-height: 1.08;
        letter-spacing: -0.025em;
        text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
    }

.backing-summary-badges[b-m7cf55ts8e] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
}

.backing-badge[b-m7cf55ts8e] {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 4px 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    color: #f7f8f9;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1;
}

.backing-badge-category[b-m7cf55ts8e] {
    background: rgba(26, 78, 158, 0.88);
}

.backing-badge-mode[b-m7cf55ts8e] {
    color: #ffe1b6;
    background: rgba(125, 80, 35, 0.76);
}

.backing-badge-difficulty[b-m7cf55ts8e] {
    background: rgba(83, 87, 91, 0.72);
}

.backing-description[b-m7cf55ts8e] {
    margin: 0 0 18px;
    color: #e0e3e5;
    font-size: 1.05rem;
    line-height: 1.55;
}

.backing-scale-info[b-m7cf55ts8e] {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 26px;
    color: #dcdfe1;
}

    .backing-scale-info strong[b-m7cf55ts8e] {
        color: #fff;
    }

.backing-target-info[b-m7cf55ts8e] {
    padding-left: 26px;
    border-left: 1px solid rgba(255, 255, 255, 0.25);
}

.backing-settings-card[b-m7cf55ts8e] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 18px 24px;
    align-items: center;
    width: 100%;
    margin-top: 16px;
    padding: 16px 20px;
    box-sizing: border-box;
}

.backing-setting-wide[b-m7cf55ts8e] {
    min-width: 0;
}

.backing-setting[b-m7cf55ts8e] {
    grid-template-columns: max-content minmax(0, 1fr);
}

.backing-output[b-m7cf55ts8e] {
    width: 100%;
    margin-top: 16px;
}

.backing-chord-grid[b-m7cf55ts8e] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 8px;
}

.backing-chord-card[b-m7cf55ts8e] {
    display: block;
    text-decoration: none;
    min-width: 0;
    padding: 15px 10px;
    border: 1px solid rgba(213, 159, 91, 0.55);
    border-radius: 9px;
    color: #f7f8f9;
    background: rgba(9, 13, 17, 0.84);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    text-align: center;
    box-sizing: border-box;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.backing-chord-card:hover[b-m7cf55ts8e],
.backing-chord-card:focus-visible[b-m7cf55ts8e] {
    border-color: #d59f5b;
    outline: 2px solid #d59f5b;
    outline-offset: 3px;
}

.backing-chord-name[b-m7cf55ts8e] {
    color: #fff;
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.15;
}

.backing-chord-degree[b-m7cf55ts8e] {
    margin-top: 6px;
    color: #c3c8cc;
    font-size: 0.9rem;
}

.backing-chord-bars[b-m7cf55ts8e] {
    margin-top: 6px;
    color: #b3bac0;
    font-size: 0.82rem;
}

.backing-total[b-m7cf55ts8e] {
    display: inline-block;
    margin-top: 12px;
    padding: 4px 8px;
    color: #ffd89e;
    background: rgba(125, 80, 35, 0.62);
    border-radius: 3px;
}

.backing-actions[b-m7cf55ts8e] {
    display: flex;
    align-items: end;
    flex-wrap: wrap;
    gap: 14px 20px;
    margin-top: 18px;
    padding: 16px 20px;
    width: 100%;
    box-sizing: border-box;
}

.backing-actions .backing-setting[b-m7cf55ts8e] {
    grid-template-columns: auto minmax(0, 1fr);
}

.backing-create-button[b-m7cf55ts8e] {
    padding: 11px 18px;
    border: 1px solid rgba(51, 199, 111, 0.22);
    border-radius: 7px;
    color: #fff;
    background: linear-gradient(180deg, #169653, #0f7e45);
    box-shadow: 0 10px 24px rgba(5, 84, 42, 0.24);
    font-weight: 600;
}

    .backing-create-button:hover[b-m7cf55ts8e],
    .backing-create-button:focus[b-m7cf55ts8e] {
        color: #fff;
        background: linear-gradient(180deg, #1cab61, #128a4c);
        box-shadow: 0 12px 30px rgba(5, 84, 42, 0.32);
    }

@media (max-width: 1100px) {
    .backing-selector-bar[b-m7cf55ts8e] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .backing-selector-progression[b-m7cf55ts8e] {
        grid-column: 1 / -1;
    }

    .backing-settings-card[b-m7cf55ts8e] {
        grid-template-columns: minmax(0, 1fr) auto auto;
    }
}

@media (max-width: 820px) {
    .backing-page[b-m7cf55ts8e] {
        padding: 22px 16px 40px;
    }

    .backing-page.has-background-image[b-m7cf55ts8e] {
        background-image: linear-gradient(90deg, rgba(5, 9, 13, 0.96), rgba(5, 9, 13, 0.78)), linear-gradient(180deg, rgba(4, 7, 10, 0.45), rgba(4, 7, 10, 0.65)), var(--backing-background-image);
        background-position: 68% center;
    }

    .backing-selector-bar[b-m7cf55ts8e],
    .backing-settings-card[b-m7cf55ts8e] {
        grid-template-columns: minmax(0, 1fr);
    }

    .backing-selector-progression[b-m7cf55ts8e] {
        grid-column: auto;
    }

    .backing-setting-wide[b-m7cf55ts8e] {
        min-width: 0;
    }
}

@media (max-width: 600px) {
    .backing-page[b-m7cf55ts8e] {
        width: 100%;
        margin-inline: 0;
        padding: 16px 12px 32px;
    }

    .backing-selector-bar[b-m7cf55ts8e],
    .backing-summary-card[b-m7cf55ts8e],
    .backing-actions[b-m7cf55ts8e],
    .backing-settings-card[b-m7cf55ts8e] {
        border-radius: 10px;
    }

    .backing-selector-bar[b-m7cf55ts8e],
    .backing-actions[b-m7cf55ts8e],
    .backing-settings-card[b-m7cf55ts8e] {
        gap: 14px;
        padding: 16px;
    }

    .backing-selector-group[b-m7cf55ts8e],
    .backing-actions .backing-setting[b-m7cf55ts8e],
    .backing-setting[b-m7cf55ts8e] {
        grid-template-columns: minmax(0, 1fr);
        gap: 6px;
    }

    .backing-small-input[b-m7cf55ts8e] {
        width: 100%;
    }

    .backing-summary-card[b-m7cf55ts8e] {
        margin-top: 16px;
        padding: 20px 18px;
    }

        .backing-summary-card h1[b-m7cf55ts8e] {
            font-size: 1.8rem;
        }

    .backing-target-info[b-m7cf55ts8e] {
        width: 100%;
        padding-top: 8px;
        padding-left: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.2);
        border-left: 0;
    }

    .backing-settings-card[b-m7cf55ts8e] {
        margin-top: 16px;
    }

    .backing-chord-grid[b-m7cf55ts8e] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .backing-actions[b-m7cf55ts8e] {
        display: flex;
    }

    .backing-create-button[b-m7cf55ts8e] {
        width: 100%;
    }
}

@media (max-width: 360px) {
    .backing-chord-grid[b-m7cf55ts8e] {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (prefers-reduced-transparency: reduce) {
    .backing-selector-bar[b-m7cf55ts8e],
    .backing-summary-card[b-m7cf55ts8e],
    .backing-actions[b-m7cf55ts8e],
    .backing-settings-card[b-m7cf55ts8e],
    .backing-chord-card[b-m7cf55ts8e] {
        background: rgba(9, 13, 17, 0.96);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}
/* /Components/Pages/Drum_Sequencer.razor.rz.scp.css */
/* Hardware-style Duncan Beat drum sequencer */

.sequencer-page[b-1pje5un3of] {
    --db-green: #7cff38;
    --db-green-hot: #9aff55;
    --db-green-dark: #2d6b18;
    --db-panel: #171918;
    --db-panel-2: #222522;
    --db-black: #0c0d0c;
    --db-edge: #343834;
    --db-text: #ecefe9;
    --db-muted: #8f968e;
    color: var(--db-text);
}

.machine-brand[b-1pje5un3of] {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin: 0 0 12px 8px;
    text-transform: uppercase;
    letter-spacing: .16em;
}

.brand-main[b-1pje5un3of] {
    font-size: 24px;
    font-weight: 800;
    color: #111;
}

.brand-sub[b-1pje5un3of] {
    font-size: 11px;
    font-weight: 800;
    color: #477a31;
    letter-spacing: .22em;
}

.drum-machine-shell[b-1pje5un3of] {
    position: relative;
    padding: 26px 24px 30px;
    border: 1px solid #080908;
    border-radius: 18px;
    color: var(--db-text);
    background: radial-gradient(circle at 20% 0%, rgba(255,255,255,.055), transparent 27%), radial-gradient(circle at 80% 100%, rgba(255,255,255,.025), transparent 24%), linear-gradient(145deg, #252825 0%, #141614 48%, #1b1d1b 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 -2px 0 rgba(0,0,0,.85), 0 18px 38px rgba(0,0,0,.3);
}

    .drum-machine-shell[b-1pje5un3of]::before {
        content: "";
        pointer-events: none;
        position: absolute;
        inset: 0;
        border-radius: inherit;
        opacity: .18;
        background-image: repeating-linear-gradient(110deg, rgba(255,255,255,.035) 0 1px, transparent 1px 4px);
    }

.machine-screw[b-1pje5un3of] {
    position: absolute;
    z-index: 2;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #555 0 12%, #191b19 26% 58%, #050605 60% 100%);
    border: 1px solid #000;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 1px 2px #000;
}

    .machine-screw[b-1pje5un3of]::after {
        content: "";
        position: absolute;
        left: 3px;
        right: 3px;
        top: 7px;
        height: 1px;
        background: #020302;
        transform: rotate(45deg);
    }

.screw-tl[b-1pje5un3of] {
    top: 10px;
    left: 10px;
}

.screw-tr[b-1pje5un3of] {
    top: 10px;
    right: 10px;
}

.screw-bl[b-1pje5un3of] {
    bottom: 10px;
    left: 10px;
}

.screw-br[b-1pje5un3of] {
    bottom: 10px;
    right: 10px;
}

.machine-top-strip[b-1pje5un3of] {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
    padding: 13px 16px;
    border: 1px solid #050605;
    border-radius: 9px;
    background: linear-gradient(#1a1c1a, #111311);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 2px 5px rgba(0,0,0,.5);
}

.panel-kicker[b-1pje5un3of],
.editor-label[b-1pje5un3of] {
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .18em;
    color: var(--db-green);
}

.panel-title[b-1pje5un3of] {
    margin-top: 2px;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: .04em;
}

.panel-description[b-1pje5un3of] {
    max-width: 720px;
    margin-top: 4px;
    color: var(--db-muted);
    font-size: 12px;
    line-height: 1.35;
}

.status-display[b-1pje5un3of] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 240px;
    justify-content: flex-end;
    padding: 9px 12px;
    border: 1px solid #020302;
    border-radius: 5px;
    color: #9eaa9b;
    background: linear-gradient(#080b08, #030503);
    box-shadow: inset 0 0 13px rgba(0,0,0,.9), 0 1px 0 rgba(255,255,255,.04);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
}

    .status-display strong[b-1pje5un3of] {
        color: var(--db-green);
    }

.status-led[b-1pje5un3of] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #294221;
    box-shadow: inset 0 0 2px rgba(0,0,0,.8);
    transition: background-color .04s ease, box-shadow .04s ease, transform .04s ease;
}

    .status-led.beat-pulse[b-1pje5un3of] {
        background: #c5ff9d;
        box-shadow: 0 0 11px #7cff38, 0 0 3px #fff inset;
        transform: scale(1.2);
    }

.machine-settings[b-1pje5un3of],
.transport-panel[b-1pje5un3of],
.bar-selector[b-1pje5un3of],
.selected-hit-editor[b-1pje5un3of],
.service-panel[b-1pje5un3of] {
    position: relative;
    z-index: 1;
}

.machine-settings[b-1pje5un3of] {
    padding: 14px 16px 0;
    margin-bottom: 14px;
    border: 1px solid #0a0b0a;
    border-radius: 10px;
    background: rgba(8,9,8,.35);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}

.drum-machine-shell .form-label[b-1pje5un3of] {
    margin-bottom: 5px;
    color: #9ea59d;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .12em;
}

.drum-machine-shell .form-control[b-1pje5un3of],
.drum-machine-shell .form-select[b-1pje5un3of] {
    color: #e5e9e3;
    background-color: #0e100e;
    border: 1px solid #3c423b;
    border-radius: 5px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,.8);
}

    .drum-machine-shell .form-control:focus[b-1pje5un3of],
    .drum-machine-shell .form-select:focus[b-1pje5un3of] {
        border-color: #5a8f43;
        box-shadow: 0 0 0 .16rem rgba(124,255,56,.12), inset 0 1px 3px rgba(0,0,0,.8);
    }

.transport-panel[b-1pje5un3of] {
    gap: 12px;
    padding: 10px;
    border: 1px solid #080908;
    border-radius: 9px;
    background: #101210;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}

.tempo-stepper[b-1pje5un3of] {
    display: flex;
    align-items: stretch;
    border: 1px solid #464b46;
    border-radius: 7px;
    overflow: hidden;
    background: #101310;
}

.tempo-stepper .form-control[b-1pje5un3of] {
    min-width: 0;
    padding-inline: 2px;
    border: 0;
    border-radius: 0;
    text-align: center;
    font-variant-numeric: tabular-nums;
    appearance: textfield;
    -moz-appearance: textfield;
}

.tempo-stepper input[b-1pje5un3of]::-webkit-inner-spin-button,
.tempo-stepper input[b-1pje5un3of]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.tempo-step[b-1pje5un3of] {
    flex: 0 0 30px;
    padding: 0;
    border: 0;
    color: #e4ebe3;
    background: linear-gradient(#373d36, #242923);
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
}

.tempo-step:hover:not(:disabled)[b-1pje5un3of] { background: #465441; color: #b9f39e; }
.tempo-step:active:not(:disabled)[b-1pje5un3of] { background: #1b2418; }
.tempo-step:disabled[b-1pje5un3of] { opacity: .35; cursor: default; }
.tempo-step:focus-visible[b-1pje5un3of] { outline: 2px solid #b9f39e; outline-offset: -3px; }

.machine-button.transport-icon[b-1pje5un3of] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    min-width: 52px;
    padding: 0;
    font-size: 18px;
    line-height: 1;
}

.transport-svg[b-1pje5un3of] {
    display: block;
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    fill: currentColor;
    filter: drop-shadow(0 0 4px currentColor);
}

.new-beat-button[b-1pje5un3of] {
    margin-left: 12px;
}

.bar-transport-group[b-1pje5un3of] {
    gap: 12px;
    margin-left: 18px;
}

.transport-utility-group[b-1pje5un3of] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.midi-clock-panel[b-1pje5un3of] {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 14px 16px;
    border: 1px solid #080908;
    border-radius: 9px;
    background: #101210;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}

.midi-timer-button[b-1pje5un3of] {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 34px;
    padding: 0 13px;
    border: 1px solid #315d20;
    border-radius: 5px;
    color: var(--db-green);
    background: linear-gradient(180deg, #1d2b19, #0b100a);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 2px 0 #050605, 0 0 12px rgba(124,255,56,.08);
    cursor: pointer;
    list-style: none;
    font: 900 11px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: .13em;
    user-select: none;
}

    .midi-timer-button:hover[b-1pje5un3of] {
        filter: brightness(1.18);
    }

    .midi-timer-button:focus-visible[b-1pje5un3of] {
        outline: 2px solid var(--db-green);
        outline-offset: 3px;
    }

.midi-timer-led[b-1pje5un3of] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--db-green);
    box-shadow: 0 0 7px var(--db-green);
}

.beat-data-button[b-1pje5un3of] {
    color: #72d9ff;
    border-color: #285b70;
    background: linear-gradient(180deg, #16272e, #091014);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 2px 0 #050605, 0 0 12px rgba(80,200,255,.08);
}

.beat-data-led[b-1pje5un3of] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #72d9ff;
    box-shadow: 0 0 7px #72d9ff;
}

.midi-timer-chevron[b-1pje5un3of] {
    width: 7px;
    height: 7px;
    margin-left: 2px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform .16s ease;
}

    .midi-timer-chevron.open[b-1pje5un3of] {
        transform: rotate(225deg) translate(-1px, -1px);
    }

.midi-clock-heading[b-1pje5un3of] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.midi-clock-badge[b-1pje5un3of] {
    padding: 4px 8px;
    border: 1px solid #315d20;
    border-radius: 4px;
    color: var(--db-green);
    background: #0a1208;
    font: 700 11px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.machine-button.midi-load-button[b-1pje5un3of] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 42px;
    min-width: 42px;
    min-height: 38px;
    padding: 0;
    line-height: 1;
}

.refresh-svg[b-1pje5un3of] {
    display: block;
    flex: 0 0 25px;
    width: 25px;
    height: 25px;
    fill: var(--db-green);
}

.machine-button[b-1pje5un3of],
.bar-button[b-1pje5un3of] {
    min-height: 42px;
    padding: 0 20px;
    border: 1px solid #050605;
    border-radius: 5px;
    color: #e8ece6;
    background: linear-gradient(#30342f, #161816);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 3px 0 #050605, 0 4px 8px rgba(0,0,0,.3);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    transition: transform .08s ease, filter .08s ease, box-shadow .08s ease;
}

    .machine-button:hover[b-1pje5un3of],
    .bar-button:hover[b-1pje5un3of] {
        filter: brightness(1.12);
    }

    .machine-button:active[b-1pje5un3of],
    .bar-button:active[b-1pje5un3of] {
        transform: translateY(2px);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 1px 0 #050605;
    }

.transport-play[b-1pje5un3of] {
    color: var(--db-green);
}

.transport-stop[b-1pje5un3of],
.danger-button[b-1pje5un3of] {
    color: #ff857d;
}

.bar-selector[b-1pje5un3of] {
    display: inline-flex;
    padding: 6px;
    gap: 7px;
    border-radius: 8px;
    border: 1px solid #070807;
    background: #0d0f0d;
    box-shadow: inset 0 1px 5px rgba(0,0,0,.8);
}

.bar-button.active[b-1pje5un3of] {
    color: #dfffd2;
    border-color: #315d20;
    background: linear-gradient(#263b20, #142211);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 12px rgba(124,255,56,.13), 0 3px 0 #050605;
}

.drum-machine-shell .card[b-1pje5un3of] {
    border: 1px solid #080908;
    background: #111311;
    color: var(--db-text);
}

.selected-hit-editor[b-1pje5un3of] {
    position: sticky;
    top: 0;
    min-height: 70px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    border: 1px solid #030403;
    border-radius: 8px;
    background: linear-gradient(180deg, #0c100c, #060806);
    box-shadow: inset 0 0 18px rgba(0,0,0,.8), 0 2px 5px rgba(0,0,0,.4);
}

    .selected-hit-editor > div[b-1pje5un3of] {
        width: 100%;
    }

.selected-hit-controls[b-1pje5un3of] {
    display: grid;
    grid-template-columns: minmax(190px, auto) minmax(240px, 1fr) 130px auto;
    align-items: end;
    gap: 10px 16px;
}

.selected-hit-identity[b-1pje5un3of] {
    display: flex;
    min-height: 40px;
    flex-direction: column;
    justify-content: space-between;
    gap: 7px;
}

.selected-hit-badges[b-1pje5un3of] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.selected-hit-controls > button[b-1pje5un3of] {
    min-height: 31px;
    margin-bottom: 0;
}

.selected-hit-velocity[b-1pje5un3of] {
    min-width: 0;
}

    .selected-hit-velocity .form-label[b-1pje5un3of] {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

        .selected-hit-velocity .form-label strong[b-1pje5un3of] {
            color: var(--db-green);
            font: 800 12px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        }

.selected-hit-substep[b-1pje5un3of] {
    width: 130px;
}

.selected-hit-editor .badge[b-1pje5un3of] {
    border: 1px solid #354330;
    color: #c9e8bb;
    background: #151d13 !important;
}

.selected-hit-editor .text-muted[b-1pje5un3of] {
    color: #7e877b !important;
}

.selected-hit-empty[b-1pje5un3of] {
    min-height: 44px;
    display: flex;
    align-items: center;
}

.selected-hit-editor .form-range[b-1pje5un3of] {
    display: block;
    height: 31px;
    margin: 0;
    accent-color: var(--db-green);
}

.selected-hit-editor .form-select[b-1pje5un3of] {
    min-width: 110px;
}

.pattern-caption[b-1pje5un3of] {
    position: relative;
    z-index: 1;
    padding: 0 4px;
    color: #f2f4f0;
    font-size: 12px;
}

    .pattern-caption strong[b-1pje5un3of] {
        text-transform: uppercase;
        letter-spacing: .06em;
    }

    .pattern-caption .text-muted[b-1pje5un3of] {
        color: #777f76 !important;
    }

.grid-bezel[b-1pje5un3of] {
    position: relative;
    z-index: 1;
    overflow-x: auto;
    padding: 10px;
    border: 1px solid #050605;
    border-radius: 10px;
    background: #0b0d0b;
    box-shadow: inset 0 0 0 1px #2b2e2b, inset 0 0 18px rgba(0,0,0,.85), 0 2px 5px rgba(0,0,0,.45);
}

.drum-grid[b-1pje5un3of] {
    min-width: 930px;
    margin: 0;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 4px 4px;
    color: var(--db-text);
    background: transparent;
}

    .drum-grid > :not(caption) > * > *[b-1pje5un3of] {
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
        vertical-align: middle;
    }

.instrument-column[b-1pje5un3of] {
    width: 166px;
    min-width: 166px;
    padding-right: 4px !important;
    color: #daddd8;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.instrument-control-strip[b-1pje5un3of] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 24px 24px;
    align-items: center;
    gap: 4px;
}

.instrument-button[b-1pje5un3of] {
    width: 100%;
    height: 40px;
    padding: 0 8px;
    text-align: left;
    color: #e7eae4;
    border: 1px solid #080908;
    border-radius: 4px;
    background: linear-gradient(180deg, #292c29, #151715);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 2px 0 #050605;
    font-size: 12px;
    font-weight: 600;
}

.instrument-mix-button[b-1pje5un3of] {
    width: 24px;
    height: 28px;
    padding: 0;
    border: 1px solid #050605;
    border-radius: 3px;
    color: #788078;
    background: linear-gradient(#262926, #111311);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 2px 0 #050605;
    font: 900 10px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

    .instrument-mix-button:hover[b-1pje5un3of] {
        color: #e8ece6;
        filter: brightness(1.15);
    }

    .instrument-mix-button.active.mute[b-1pje5un3of] {
        color: #ffd0cd;
        border-color: #7a312d;
        background: linear-gradient(#6a2b27, #321311);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 0 8px rgba(255,80,70,.32), 0 2px 0 #050605;
    }

    .instrument-mix-button.active.solo[b-1pje5un3of] {
        color: #efffdc;
        border-color: #4c762d;
        background: linear-gradient(#426726, #1d3012);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 0 8px rgba(124,255,56,.32), 0 2px 0 #050605;
    }

.drum-grid tr.instrument-silenced .instrument-button[b-1pje5un3of] {
    opacity: .48;
}

.instrument-button[b-1pje5un3of]::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 10px;
    border-radius: 50%;
    background: #121512;
    border: 1px solid #000;
    box-shadow: inset 0 1px 1px rgba(255,255,255,.15);
}

.instrument-button:hover[b-1pje5un3of] {
    color: white;
    background: linear-gradient(#333733, #1b1e1b);
}

    .instrument-button:hover[b-1pje5un3of]::before {
        background: #477f30;
        box-shadow: 0 0 6px rgba(124,255,56,.45);
    }

.drum-grid tr.instrument-playing .instrument-button[b-1pje5un3of]::before {
    background: #c5ff9d;
    box-shadow: 0 0 10px #7cff38;
}

.step-header[b-1pje5un3of] {
    height: 39px;
    min-width: 40px;
    text-align: center;
    color: #d8dbd6 !important;
    border-radius: 3px;
}

.step-number[b-1pje5un3of] {
    font-size: 12px;
    font-weight: 800;
    line-height: 1.1;
}

.step-musical[b-1pje5un3of] {
    margin-top: 2px;
    font-size: 9px;
    color: #858c83;
    line-height: 1;
}

.beat-header[b-1pje5un3of] {
    border-left: 2px solid #5b6359 !important;
    background: linear-gradient(90deg, rgba(255,255,255,.035), transparent) !important;
}

    .beat-header .step-number[b-1pje5un3of] {
        color: #fff;
    }

    .beat-header .step-musical[b-1pje5un3of] {
        color: #aeb5aa;
    }

.drum-cell[b-1pje5un3of] {
    padding: 2px !important;
}

.beat-cell[b-1pje5un3of] {
    border-left: 2px solid #3f4540 !important;
    background: linear-gradient(90deg, rgba(255,255,255,.025), transparent) !important;
}

.drum-step[b-1pje5un3of] {
    position: relative;
    width: 100%;
    height: 42px;
    padding: 0;
    overflow: hidden;
    border: 1px solid #050605;
    border-radius: 4px;
    color: #b6bdb3;
    background: linear-gradient(145deg, #282b28, #141614 70%);
    box-shadow: inset 1px 1px 0 rgba(255,255,255,.07), inset -1px -1px 0 rgba(0,0,0,.75), 0 2px 0 #050605;
    font-size: 9px;
    line-height: 1.05;
    transition: transform .07s ease, filter .07s ease, box-shadow .1s ease;
}

    .drum-step:hover[b-1pje5un3of] {
        filter: brightness(1.25);
        transform: translateY(-1px);
    }

.beat-cell .drum-step[b-1pje5un3of] {
    border-color: #090b09;
    background: linear-gradient(145deg, #303430, #191c19 72%);
}

    .drum-step.active[b-1pje5un3of],
    .beat-cell .drum-step.active[b-1pje5un3of] {
        color: #10200c;
        border-color: #2c561d;
        background: radial-gradient(circle at 45% 38%, #c1ff8f 0%, #91ff4d 18%, #58c52c 55%, #2b6d18 100%);
        box-shadow: inset 0 1px 2px rgba(255,255,255,.5), inset 0 -3px 7px rgba(22,80,7,.48), 0 0 7px rgba(124,255,56,.55), 0 2px 0 #071007;
        font-weight: 900;
        text-shadow: 0 1px rgba(255,255,255,.25);
    }

        .drum-step.active:hover[b-1pje5un3of],
        .beat-cell .drum-step.active:hover[b-1pje5un3of] {
            filter: brightness(1.12);
        }

.drum-step.selected[b-1pje5un3of] {
    outline: 2px solid #d8ffd0;
    outline-offset: 1px;
    box-shadow: 0 0 0 2px #315e21, 0 0 12px rgba(124,255,56,.72);
}

.drum-step.playing[b-1pje5un3of] {
    box-shadow: inset 0 0 0 2px #f0d95d, 0 0 10px rgba(240,217,93,.42);
}

.drum-step.active.playing[b-1pje5un3of] {
    box-shadow: inset 0 0 0 2px #fff7b0, 0 0 13px rgba(187,255,92,.8);
}

.service-panel[b-1pje5un3of] {
    padding: 14px;
    border: 1px solid #070807;
    border-radius: 9px;
    background: #0d0f0d;
}

    .service-panel h4[b-1pje5un3of] {
        margin-bottom: 10px;
        color: #838a80;
        font-size: 11px;
        font-weight: 900;
        letter-spacing: .14em;
    }

.service-metadata[b-1pje5un3of] {
    padding-bottom: 14px;
    border-bottom: 1px solid #242924;
}

.service-panel textarea[b-1pje5un3of] {
    color: #8fb780 !important;
    background: #060806 !important;
    border-color: #242924 !important;
    font-size: 11px;
}

.service-panel .btn[b-1pje5un3of] {
    border-radius: 4px;
}

.table-responsive[b-1pje5un3of]::-webkit-scrollbar {
    height: 10px;
}

.table-responsive[b-1pje5un3of]::-webkit-scrollbar-track {
    background: #070807;
    border-radius: 10px;
}

.table-responsive[b-1pje5un3of]::-webkit-scrollbar-thumb {
    background: #363b36;
    border: 2px solid #070807;
    border-radius: 10px;
}

    .table-responsive[b-1pje5un3of]::-webkit-scrollbar-thumb:hover {
        background: #4e594a;
    }

.machine-maker-mark[b-1pje5un3of] {
    position: relative;
    z-index: 1;
    display: flex;
    width: fit-content;
    margin: 24px auto 0;
    padding: 7px 15px 6px;
    align-items: center;
    gap: 10px;
    border: 1px solid #0a0b0a;
    border-radius: 3px;
    color: #292c29;
    background: linear-gradient(165deg, #303330, #1a1c1a 55%, #252825);
    box-shadow: inset 1px 1px 0 rgba(255,255,255,.11), inset -1px -1px 0 rgba(0,0,0,.75), 0 2px 4px rgba(0,0,0,.45);
    text-transform: uppercase;
    user-select: none;
}

.maker-mark-main[b-1pje5un3of] {
    color: #171917;
    font-size: 14px;
    font-weight: 950;
    font-style: normal;
    letter-spacing: .13em;
    text-shadow: 0 1px 0 rgba(255,255,255,.16), 0 -1px 0 #050605;
}

.maker-mark-divider[b-1pje5un3of] {
    width: 1px;
    height: 16px;
    background: #111311;
    box-shadow: 1px 0 0 rgba(255,255,255,.1);
}

.maker-mark-sub[b-1pje5un3of] {
    color: #171917;
    font: 800 8px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: .19em;
    text-shadow: 0 1px 0 rgba(255,255,255,.14), 0 -1px 0 #050605;
}

@media (max-width: 900px) {
    .drum-machine-shell[b-1pje5un3of] {
        padding: 20px 14px 24px;
        border-radius: 12px;
    }

    .machine-top-strip[b-1pje5un3of] {
        align-items: flex-start;
        flex-direction: column;
    }

    .status-display[b-1pje5un3of] {
        min-width: 0;
        width: 100%;
        justify-content: flex-start;
    }

    .selected-hit-editor[b-1pje5un3of] {
        position: static;
    }

    .selected-hit-controls[b-1pje5un3of] {
        grid-template-columns: minmax(180px, 1fr) minmax(220px, 2fr) 130px;
    }

        .selected-hit-controls > button[b-1pje5un3of] {
            grid-column: 3;
        }
}

@media (max-width: 768px) {
    .new-beat-button[b-1pje5un3of] {
        margin-left: 0;
    }

    .bar-transport-group[b-1pje5un3of] {
        margin-left: 0;
    }

    .instrument-column[b-1pje5un3of] {
        width: 166px;
        min-width: 166px;
    }

    .drum-step[b-1pje5un3of] {
        height: 38px;
    }

    .machine-brand[b-1pje5un3of] {
        margin-left: 0;
    }

    .brand-main[b-1pje5un3of] {
        font-size: 20px;
    }

    .machine-maker-mark[b-1pje5un3of] {
        padding-inline: 11px;
        gap: 7px;
    }

    .maker-mark-main[b-1pje5un3of] {
        font-size: 12px;
    }

    .maker-mark-sub[b-1pje5un3of] {
        font-size: 7px;
    }

    .selected-hit-controls[b-1pje5un3of] {
        grid-template-columns: 1fr 120px;
    }

    .selected-hit-identity[b-1pje5un3of],
    .selected-hit-velocity[b-1pje5un3of] {
        grid-column: 1 / -1;
    }

    .selected-hit-controls > button[b-1pje5un3of] {
        grid-column: 2;
    }
}


/* =========================================================
   DSEG LCD WEB FONTS

   Files:
   wwwroot/fonts/dseg/DSEG7Classic-Regular.woff2
   wwwroot/fonts/dseg/DSEG14Classic-Regular.woff2
   ========================================================= */

@font-face {
    font-family: "DSEG7";
    src: url("/fonts/dseg/DSEG7Classic-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "DSEG14";
    src: url("/fonts/dseg/DSEG14Classic-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}


/* =========================================================
   GREY LCD DISPLAY
   ========================================================= */

.machine-lcd-bezel[b-1pje5un3of] {
    position: relative;
    z-index: 1;
    margin-bottom: 18px;
    padding: 8px;
    border: 1px solid #050605;
    border-radius: 10px;
    background: linear-gradient(180deg, #313431 0%, #191b19 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 -2px 0 rgba(0,0,0,.8), 0 3px 8px rgba(0,0,0,.45);
}

.machine-lcd[b-1pje5un3of] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 25px minmax(110px, 140px) minmax(110px, 140px) 25px minmax(260px, 340px);
    align-items: stretch;
    min-height: 118px;
    overflow: hidden;
    padding: 14px 18px;
    border: 2px solid #0a0b0a;
    border-radius: 6px;
    color: #222621;
    background: linear-gradient( 180deg, rgba(255,255,255,.17), transparent 28% ), repeating-linear-gradient( 0deg, rgba(44,54,44,.025) 0 1px, transparent 1px 3px ), linear-gradient( 180deg, #b8beb4 0%, #a6aea3 100% );
    box-shadow: inset 0 0 14px rgba(32,38,31,.42), inset 0 1px 0 rgba(255,255,255,.72), 0 1px 0 rgba(255,255,255,.08);
    text-shadow: 0 1px 0 rgba(255,255,255,.22);
}

.lcd-program[b-1pje5un3of],
.lcd-value-block[b-1pje5un3of],
.lcd-status[b-1pje5un3of] {
    min-width: 0;
}

/* Program area */
.lcd-program[b-1pje5un3of] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-right: 20px;
}

.lcd-label[b-1pje5un3of] {
    margin-bottom: 5px;
    color: #2f342e;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .12em;
}

.lcd-program-heading[b-1pje5un3of] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    justify-content: space-between;
    gap: 6px 12px;
    margin-bottom: 8px;
}

.lcd-program-heading .lcd-label[b-1pje5un3of] {
    margin-bottom: 0;
}

.lcd-program-metadata[b-1pje5un3of] {
    display: flex;
    flex-direction: column;
    justify-self: end;
    gap: 6px;
    min-width: 0;
    max-width: 100%;
}

.lcd-category[b-1pje5un3of] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    min-width: 0;
    max-width: 100%;
    color: #20251f;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    line-height: 1.2;
    text-transform: uppercase;
}

.lcd-category-label[b-1pje5un3of] {
    flex: 0 0 calc(8ch + .64em);
    font-size: 9px;
    letter-spacing: .08em;
}

.lcd-category-name[b-1pje5un3of] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: "DSEG14", monospace;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: .04em;
}

.lcd-program-name[b-1pje5un3of] {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #171b16;
    font-family: "DSEG14", monospace;
    font-size: 31px;
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: .035em;
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
}

.lcd-description[b-1pje5un3of] {
    overflow: hidden;
    margin-top: 9px;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #30352f;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: .025em;
}

/* Vertical separators */
.lcd-divider[b-1pje5un3of] {
    width: 1px;
    /* Reserve the separator's spacing in its grid track, not in adjacent content. */
    margin: 2px 0;
    justify-self: center;
    background: rgba(35,41,34,.35);
    box-shadow: 1px 0 0 rgba(255,255,255,.25);
}

/* Tempo / Swing */
.lcd-value-block[b-1pje5un3of] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

    .lcd-value-block .lcd-label[b-1pje5un3of] {
        width: 100%;
        margin-bottom: 7px;
        text-align: center;
    }

.lcd-digits[b-1pje5un3of] {
    color: #151915;
    font-family: "DSEG7", monospace;
    font-size: 51px;
    font-weight: 400;
    line-height: .95;
    letter-spacing: .035em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.lcd-unit[b-1pje5un3of] {
    display: inline-block;
    margin-left: 4px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 18px;
    font-weight: 700;
    vertical-align: 22%;
}

/* Status area */
/* =========================================================
   RIGHT-HAND LCD STATUS AREA
   ========================================================= */

.lcd-status[b-1pje5un3of] {
    display: grid;
    grid-template-rows: 1fr 1fr;
    align-items: center;
    min-width: 0;
    padding: 10px 12px 10px 18px;
    overflow: hidden;
    color: #20251f;
    font-family: "DSEG14", monospace;
    letter-spacing: .035em;
}


/* =========================================================
   TOP STATUS ROW

   ▶ READY          ♪ 4/4
   ========================================================= */

.lcd-status-line[b-1pje5un3of] {
    display: grid;
    grid-template-columns: 20px minmax(72px, 1fr) 22px auto;
    align-items: center;
    column-gap: 9px;
    min-width: 0;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
}


/* PLAY ICON */

.lcd-play-icon[b-1pje5un3of] {
    width: 0;
    height: 0;
    margin: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 16px solid #343a33;
    justify-self: start;
}

    .lcd-play-icon.running[b-1pje5un3of] {
        border-left-color: #171a16;
    }


.lcd-stop-icon[b-1pje5un3of] {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin-right: 5px;
    background: #343a33;
    box-shadow: 1px 1px 0 rgba(255,255,255,.18);
}

.lcd-transport-icon.running[b-1pje5un3of] {
    opacity: .2;
}

.lcd-transport-icon.running[data-beat-pulse="true"][b-1pje5un3of] {
    opacity: 1;
}

/* READY / RUNNING */

.lcd-status-word[b-1pje5un3of] {
    min-width: 0;
    overflow: hidden;
    color: #171a16;
    font-family: "DSEG14", monospace;
    font-size: clamp(14px, 1.15vw, 18px);
    font-weight: 400;
    letter-spacing: .025em;
    white-space: nowrap;
    justify-self: start;
}


/* MUSICAL NOTE */

.lcd-meter-icon[b-1pje5un3of] {
    margin: 0;
    color: #20251f;
    font-family: Georgia, serif;
    font-size: clamp(18px, 1.35vw, 24px);
    line-height: 1;
    justify-self: center;
}


/* 4/4 */

.lcd-time-signature[b-1pje5un3of] {
    min-width: 0;
    margin: 0;
    color: #171a16;
    font-family: "DSEG14", monospace;
    font-size: clamp(14px, 1.1vw, 17px);
    letter-spacing: .02em;
    white-space: nowrap;
    justify-self: end;
}


/* =========================================================
   LOWER STATUS ROW

   BAR 1       MODE NORM
   ========================================================= */

.lcd-status-line.lcd-status-lower[b-1pje5un3of] {
    display: grid;
    grid-template-columns: auto 28px auto minmax(50px, 1fr);
    align-items: center;
    column-gap: 8px;
    min-width: 0;
    width: 100%;
    overflow: hidden;
    font-size: clamp(11px, .95vw, 14px);
    line-height: 1;
}


.lcd-status-lower strong[b-1pje5un3of] {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    color: #141814;
    font-family: "DSEG14", monospace;
    font-size: inherit;
    font-weight: 400;
    letter-spacing: .02em;
    white-space: nowrap;
}


    /* Keep NORM from crossing the divider */

    .lcd-status-lower strong:last-child[b-1pje5un3of] {
        justify-self: start;
        max-width: 100%;
        text-overflow: clip;
    }

.lcd-status-line[b-1pje5un3of] {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    white-space: nowrap;
    color: #1d211c;
    line-height: 1;
}

/* Smaller hardware-style play triangle */
.lcd-play-icon[b-1pje5un3of] {
    flex: 0 0 auto;
    width: 0;
    height: 0;
    margin-right: 3px;
    border-top: 11px solid transparent;
    border-bottom: 11px solid transparent;
    border-left: 18px solid #343a33;
    filter: drop-shadow(1px 1px 0 rgba(255,255,255,.18));
}

    .lcd-play-icon.running[b-1pje5un3of] {
        border-left-color: #171a16;
    }

.lcd-status-word[b-1pje5un3of] {
    flex: 0 0 auto;
    min-width: 96px;
    color: #171a16;
    font-family: "DSEG14", monospace;
    font-size: 18px;
    font-weight: 400;
    letter-spacing: .035em;
}

.lcd-meter-icon[b-1pje5un3of] {
    flex: 0 0 auto;
    margin-left: auto;
    color: #20251f;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 23px;
    line-height: 1;
}

.lcd-time-signature[b-1pje5un3of] {
    flex: 0 0 auto;
    min-width: 44px;
    color: #171a16;
    font-family: "DSEG14", monospace;
    font-size: 17px;
    font-weight: 400;
    letter-spacing: .025em;
}

/* BAR / MODE row */
.lcd-status-lower[b-1pje5un3of] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #252a24;
    font-family: "DSEG14", monospace;
    font-size: 14px;
    line-height: 1;
}

    .lcd-status-lower strong[b-1pje5un3of] {
        min-width: 30px;
        margin-right: 8px;
        color: #141814;
        font-family: "DSEG14", monospace;
        font-size: 15px;
        font-weight: 400;
        letter-spacing: .035em;
    }

/* =========================================================
   LCD RESPONSIVE
   ========================================================= */

@media (max-width: 1150px) {
    .machine-lcd[b-1pje5un3of] {
        grid-template-columns: minmax(0, 1fr) 25px 120px 120px 25px 250px;
    }

    .lcd-program-name[b-1pje5un3of] {
        font-size: 27px;
    }

    .lcd-digits[b-1pje5un3of] {
        font-size: 43px;
    }

    .lcd-status[b-1pje5un3of] {
        padding-left: 9px;
    }

    .lcd-status-line[b-1pje5un3of] {
        gap: 7px;
    }

    .lcd-status-word[b-1pje5un3of] {
        min-width: 76px;
        font-size: 15px;
    }

    .lcd-play-icon[b-1pje5un3of] {
        margin-right: 2px;
        border-top-width: 9px;
        border-bottom-width: 9px;
        border-left-width: 15px;
    }

    .lcd-meter-icon[b-1pje5un3of] {
        font-size: 20px;
    }

    .lcd-time-signature[b-1pje5un3of] {
        min-width: 36px;
        font-size: 14px;
    }

    .lcd-status-lower[b-1pje5un3of] {
        gap: 6px;
        font-size: 12px;
    }

        .lcd-status-lower strong[b-1pje5un3of] {
            margin-right: 5px;
            font-size: 12px;
        }
}

@media (max-width: 900px) {
    .machine-lcd[b-1pje5un3of] {
        grid-template-columns: 1fr 1fr;
        gap: 14px 18px;
        padding: 16px 18px;
    }

    .lcd-program[b-1pje5un3of] {
        grid-column: 1 / -1;
        padding-right: 0;
        padding-bottom: 12px;
        border-bottom: 1px solid rgba(35,41,34,.3);
    }

    .lcd-divider[b-1pje5un3of] {
        display: none;
    }

    .lcd-value-block[b-1pje5un3of] {
        padding: 4px 0;
    }

    .lcd-status[b-1pje5un3of] {
        grid-column: 1 / -1;
        padding: 14px 0 0;
        border-top: 1px solid rgba(35,41,34,.3);
    }

    .lcd-status-line[b-1pje5un3of] {
        justify-content: flex-start;
    }

    .lcd-meter-icon[b-1pje5un3of] {
        margin-left: 20px;
    }
}

@media (max-width: 600px) {
    .machine-lcd-bezel[b-1pje5un3of] {
        padding: 6px;
    }

    .machine-lcd[b-1pje5un3of] {
        min-height: 0;
        padding: 14px 13px;
    }

    .lcd-program-name[b-1pje5un3of] {
        font-size: 22px;
    }

    .lcd-description[b-1pje5un3of] {
        font-size: 10px;
    }

    .lcd-digits[b-1pje5un3of] {
        font-size: 37px;
    }

    .lcd-status[b-1pje5un3of] {
        gap: 12px;
    }

    .lcd-status-word[b-1pje5un3of] {
        min-width: 70px;
        font-size: 14px;
    }

    .lcd-play-icon[b-1pje5un3of] {
        border-top-width: 8px;
        border-bottom-width: 8px;
        border-left-width: 13px;
    }

    .lcd-status-lower[b-1pje5un3of] {
        font-size: 11px;
    }
}


/* =========================================================
   AI TEXT TO BEAT
   ========================================================= */

.ai-beat-panel[b-1pje5un3of] {
    position: relative;
    z-index: 1;
    padding: 14px 16px;
    border: 1px solid #0a0b0a;
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(18,26,16,.94), rgba(8,10,8,.94));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 2px 5px rgba(0,0,0,.35);
}

.ai-beat-heading[b-1pje5un3of] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 10px;
}

.ai-beat-title[b-1pje5un3of] {
    margin-top: 3px;
    color: #dce4d8;
    font-size: 12px;
    font-weight: 700;
}

.ai-beat-badge[b-1pje5un3of] {
    flex: 0 0 auto;
    padding: 5px 8px;
    border: 1px solid #315d20;
    border-radius: 4px;
    color: var(--db-green);
    background: #0a1208;
    box-shadow: 0 0 10px rgba(124,255,56,.08);
    font: 800 9px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: .12em;
}

.ai-beat-controls[b-1pje5un3of] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 280px);
    gap: 10px;
    align-items: stretch;
}

.drum-machine-shell .ai-beat-input[b-1pje5un3of] {
    min-height: 42px;
    border-color: #315d20;
}

.ai-beat-controls > .form-select[b-1pje5un3of] { min-width: 0; }

.machine-button.ai-generate-button[b-1pje5un3of] {
    min-width: 170px;
    color: #eaffdf;
    border-color: #315d20;
    background: linear-gradient(#35572a, #172613);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 3px 0 #050605, 0 0 12px rgba(124,255,56,.10);
}

.machine-button.ai-generate-button:disabled[b-1pje5un3of] {
    opacity: .5;
    cursor: wait;
    filter: none;
}

.ai-beat-status[b-1pje5un3of] {
    margin-top: 9px;
    color: #9fca8c;
    font: 700 10px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: .035em;
}

.ai-beat-status.error[b-1pje5un3of] {
    color: #ff918a;
}

@media (max-width: 768px) {
    .ai-beat-controls[b-1pje5un3of] {
        grid-template-columns: 1fr;
    }

    .machine-button.ai-generate-button[b-1pje5un3of] {
        width: 100%;
    }
}
/* /Components/Pages/Duncan_Synth.razor.rz.scp.css */
.synth-page[b-v5i7s0s5rk] {
    --synth-accent: #45f48a;
    --synth-border: #2b3530;
    min-width: 0;
    flex: 1;
    padding: clamp(18px, 3vw, 36px);
    color: #eef4ef;
    background: #000;
    color-scheme: dark;
}

.synth-header[b-v5i7s0s5rk] {
    padding-block: 8px 24px;
    border-bottom: 1px solid var(--synth-border);
}

.synth-eyebrow[b-v5i7s0s5rk] {
    margin-bottom: 10px;
    color: var(--synth-accent);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.synth-header h1[b-v5i7s0s5rk] {
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    letter-spacing: -.04em;
}

.synth-page .text-muted[b-v5i7s0s5rk] {
    color: #a2b0a7 !important;
}

.synth-preset-bar[b-v5i7s0s5rk] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
    padding: 18px 22px;
    border: 1px solid var(--synth-border);
    border-radius: 14px;
    background: #141e18;
}

.synth-preset-bar .form-label[b-v5i7s0s5rk] {
    flex-shrink: 0;
    color: var(--synth-accent);
}

.synth-preset-bar .form-select[b-v5i7s0s5rk] {
    flex: 1 1 220px;
    max-width: 540px;
}

.synth-preset-actions[b-v5i7s0s5rk] {
    display: flex;
    gap: 10px;
    margin-left: auto;
}

.synth-preset-actions .btn[b-v5i7s0s5rk] {
    white-space: nowrap;
}

.synth-page .card[b-v5i7s0s5rk] {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--synth-border);
    border-radius: 14px;
    color: #eef4ef;
    background: linear-gradient(145deg, #19211c, #111713);
    box-shadow: 0 12px 30px #0003 !important;
}

.synth-page .card-header[b-v5i7s0s5rk] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 15px 20px;
    border-bottom: 1px solid var(--synth-border);
    background: #ffffff03;
    color: #c1f5d2;
    font-size: .88rem;
    letter-spacing: .025em;
}

.synth-module-icon[b-v5i7s0s5rk] {
    flex: 0 0 60px;
    width: 60px;
    height: 44px;
    padding: 6px;
    border: 1px solid #345640;
    border-radius: 7px;
    color: var(--synth-accent);
    background: #080f0b;
    box-shadow: inset 0 2px 8px #0008;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.synth-module-icon .icon-guide[b-v5i7s0s5rk] {
    opacity: .35;
}

.synth-page .card-header .form-check[b-v5i7s0s5rk] {
    margin-bottom: 0;
}

.synth-page .card-body[b-v5i7s0s5rk] {
    padding: 22px;
}

.synth-page .form-label[b-v5i7s0s5rk] {
    color: #b6c3bb;
    font-size: .82rem;
    font-weight: 600;
}

.synth-page[b-v5i7s0s5rk]  .form-control,
.synth-page[b-v5i7s0s5rk]  .form-select {
    min-width: 0;
    min-height: 44px;
    border-color: #35443b;
    border-radius: 8px;
    color: #edf4ef;
    background-color: #0b120e;
}

.synth-page[b-v5i7s0s5rk]  .form-control:focus,
.synth-page[b-v5i7s0s5rk]  .form-select:focus,
.synth-page[b-v5i7s0s5rk]  .form-check-input:focus {
    border-color: var(--synth-accent);
    box-shadow: 0 0 0 3px #45f48a26;
}

.synth-page[b-v5i7s0s5rk]  .form-check-input:checked {
    border-color: #22d36b;
    background-color: #15964a;
}

.synth-page .form-range[b-v5i7s0s5rk]::-webkit-slider-thumb {
    background: var(--synth-accent);
}

.synth-page .form-range[b-v5i7s0s5rk]::-moz-range-thumb {
    background: var(--synth-accent);
}

.synth-page .form-range[b-v5i7s0s5rk]::-webkit-slider-runnable-track {
    background: #34483b;
}

.synth-page .form-range[b-v5i7s0s5rk]::-moz-range-track {
    background: #34483b;
}

.synth-page .btn[b-v5i7s0s5rk] {
    min-height: 44px;
    border-radius: 9px;
    font-weight: 650;
    transition: background .15s, border-color .15s, box-shadow .15s;
}

.synth-page .btn-success[b-v5i7s0s5rk],
.synth-page .btn-primary[b-v5i7s0s5rk] {
    --bs-btn-color: #062413;
    --bs-btn-bg: #45f48a;
    --bs-btn-border-color: #45f48a;
    --bs-btn-hover-color: #062413;
    --bs-btn-hover-bg: #76ffa9;
    --bs-btn-hover-border-color: #76ffa9;
    --bs-btn-active-bg: #22d36b;
    --bs-btn-active-color: #062413;
    --bs-btn-disabled-bg: #27804b;
    --bs-btn-disabled-border-color: #27804b;
}

.synth-page .btn-outline-primary[b-v5i7s0s5rk],
.synth-page .btn-outline-secondary[b-v5i7s0s5rk] {
    --bs-btn-color: #c4e9d0;
    --bs-btn-border-color: #3d624a;
    --bs-btn-hover-bg: #254732;
    --bs-btn-hover-border-color: #45f48a;
    --bs-btn-active-bg: #254732;
}

.synth-tabs[b-v5i7s0s5rk] {
    display: flex;
    gap: 6px;
    padding: 6px;
    margin-bottom: 24px;
    border: 1px solid var(--synth-border);
    border-radius: 12px;
    background: #101713;
}

.synth-tabs button[b-v5i7s0s5rk] {
    flex: 1;
    min-height: 44px;
    border: 0;
    border-radius: 8px;
    color: #b6c3bb;
    background: transparent;
    font-weight: 700;
}

.synth-tabs button.active[b-v5i7s0s5rk] {
    color: #062413;
    background: var(--synth-accent);
}

.synth-tabs button:focus-visible[b-v5i7s0s5rk],
.piano-key:focus-visible[b-v5i7s0s5rk] {
    outline: 3px solid #45f48a;
    outline-offset: 3px;
    z-index: 3;
}

.synth-design:not([hidden])[b-v5i7s0s5rk] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    align-items: start;
}

.synth-design > .card[b-v5i7s0s5rk] {
    margin-bottom: 0 !important;
}

.synth-design > .card:first-child[b-v5i7s0s5rk] {
    grid-column: 1 / -1;
}

.synth-tester[b-v5i7s0s5rk] {
    position: sticky;
    top: 12px;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
    padding: 12px 16px;
    border: 1px solid var(--synth-border);
    border-radius: 12px;
    background: #101713;
    box-shadow: 0 8px 24px #0006;
}

.synth-tester strong[b-v5i7s0s5rk] {
    margin-right: 8px;
    color: #c1f5d2;
    font-size: .85rem;
}

.synth-play-actions[b-v5i7s0s5rk] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.synth-keyboard-scroll[b-v5i7s0s5rk] {
    overflow-x: auto;
    padding: 8px 4px 18px;
}

.synth-keyboard[b-v5i7s0s5rk] {
    position: relative;
    height: clamp(210px, 25vw, 300px);
    min-width: 660px;
    border: 8px solid #26372c;
    border-radius: 10px;
    background: #090d0b;
    box-shadow: 0 12px 24px #0006;
}

.piano-key[b-v5i7s0s5rk] {
    position: absolute;
    top: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0 0 14px;
    border-radius: 0 0 6px 6px;
    font-size: .8rem;
    font-weight: 700;
    touch-action: manipulation;
    user-select: none;
}

.white-key[b-v5i7s0s5rk] {
    left: calc(var(--key-position) * 100% / 15);
    width: calc(100% / 15);
    height: 100%;
    border: 1px solid #89988e;
    border-bottom: 6px solid #aab8af;
    color: #26392d;
    background: linear-gradient(#fff, #e1eae4);
}

.black-key[b-v5i7s0s5rk] {
    z-index: 2;
    left: calc((var(--key-position) - .32) * 100% / 15);
    width: calc(.64 * 100% / 15);
    height: 63%;
    border: 1px solid #000;
    border-bottom: 6px solid #050806;
    color: #c5d4ca;
    background: linear-gradient(90deg, #101713, #2d3731, #0b100d);
    box-shadow: 2px 5px 5px #0006;
    font-size: .65rem;
}

.piano-key:hover[b-v5i7s0s5rk] {
    background: #bff8d2;
    color: #062413;
}

.piano-key:active[b-v5i7s0s5rk] {
    background: var(--synth-accent);
    color: #062413;
    border-bottom-width: 2px;
}

@media (max-width: 1100px) {
    .synth-design:not([hidden])[b-v5i7s0s5rk] {
        grid-template-columns: minmax(0, 1fr);
    }
}

.synth-page pre[b-v5i7s0s5rk] {
    padding: 16px;
    border: 1px solid #263b2e;
    border-radius: 8px;
    color: #abc9b5;
    background: #080e0a;
    font-size: .75rem;
}

@media (max-width: 600px) {
    .synth-preset-actions[b-v5i7s0s5rk] {
        width: 100%;
        margin-left: 0;
    }

    .synth-preset-actions .btn[b-v5i7s0s5rk] {
        flex: 1;
    }

    .synth-preset-bar[b-v5i7s0s5rk] {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 16px;
    }

    .synth-preset-bar .form-select[b-v5i7s0s5rk] {
        flex-basis: auto;
        max-width: none;
    }

    .synth-page .card-body[b-v5i7s0s5rk] {
        padding: 16px;
    }

    .synth-page[b-v5i7s0s5rk]  .form-control,
    .synth-page[b-v5i7s0s5rk]  .form-select {
        font-size: 16px;
    }
}
/* /Components/Pages/Guitar_Studio.razor.rz.scp.css */
.guitar-page[b-whg39snh45] {
    padding: 18px 24px 24px;
    width: 100%;
}

/* =========================================================
   TWO COLUMN LAYOUT
   Left side is the effects pedal.
   Right side/fretboard remains unchanged.
   ========================================================= */

.studio-layout[b-whg39snh45] {
    display: grid;
    grid-template-columns: 420px 500px;
    gap: 48px;
    align-items: start;
    justify-content: center;
}

.studio-left[b-whg39snh45] {
    min-width: 0;
}

.studio-right[b-whg39snh45] {
    min-width: 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

/* =========================================================
   GUITAR EFFECTS PEDAL
   No image assets required: everything is CSS.
   ========================================================= */

.guitar-pedal[b-whg39snh45] {
    position: relative;
    width: 420px;
    box-sizing: border-box;
    padding: 26px 25px 22px;
    overflow: hidden;
    border: 2px solid #77736b;
    border-radius: 24px;
    background:
        radial-gradient(circle at 15% 12%, rgba(255,255,255,.16), transparent 20%),
        radial-gradient(circle at 88% 78%, rgba(0,0,0,.12), transparent 24%),
        linear-gradient(145deg, #e5e2d9 0%, #c9c5bb 47%, #eeeae2 100%);
    box-shadow:
        0 18px 28px rgba(0, 0, 0, .20),
        0 3px 5px rgba(0, 0, 0, .24),
        inset 0 2px 2px rgba(255,255,255,.9),
        inset 0 -3px 5px rgba(56,50,42,.18);
}

.guitar-pedal[b-whg39snh45]::before {
    content: "";
    position: absolute;
    inset: 7px;
    pointer-events: none;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.45);
    box-shadow: inset 0 0 0 1px rgba(80,74,64,.15);
}

.pedal-title[b-whg39snh45] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 0 20px;
    color: #262824;
    font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
    font-size: 32px;
    font-weight: 900;
    line-height: .82;
    letter-spacing: 1px;
    text-shadow: 0 1px 0 rgba(255,255,255,.55);
}

.pedal-title[b-whg39snh45]::before,
.pedal-title[b-whg39snh45]::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 42px;
    height: 3px;
    background: #30322e;
    box-shadow: 0 7px 0 #30322e;
}

.pedal-title[b-whg39snh45]::before {
    left: 12px;
}

.pedal-title[b-whg39snh45]::after {
    right: 12px;
}

.pedal-control-grid[b-whg39snh45] {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px 12px;
}

.pedal-control[b-whg39snh45] {
    min-width: 0;
    text-align: center;
}

.pedal-control label[b-whg39snh45] {
    display: block;
    min-height: 28px;
    margin-bottom: 5px;
    color: #2c2d29;
    font-size: 12px;
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: .45px;
}

.pedal-knob[b-whg39snh45] {
    appearance: none;
    display: block;
    position: relative;
    width: 58px;
    height: 58px;
    padding: 0;
    margin: 0 auto 8px;
    border: 4px solid #111;
    border-radius: 50%;
    background:
        radial-gradient(circle at 42% 36%, #fafafa 0 8%, #c7c7c4 35%, #9d9c98 58%, #ecece9 62%, #a09f9b 100%);
    box-shadow:
        0 5px 7px rgba(0,0,0,.35),
        inset 0 1px 2px rgba(255,255,255,.9),
        0 0 0 2px #282823;
    cursor: pointer;
    transition: transform .08s ease, box-shadow .08s ease;
}

.pedal-knob:hover[b-whg39snh45] {
    box-shadow:
        0 6px 9px rgba(0,0,0,.42),
        inset 0 1px 2px rgba(255,255,255,.9),
        0 0 0 2px #282823;
}

.pedal-knob:active[b-whg39snh45] {
    transform: translateY(2px);
}

.pedal-knob:focus-visible[b-whg39snh45] {
    outline: 3px solid rgba(25,135,84,.45);
    outline-offset: 4px;
}

.pedal-knob[b-whg39snh45]::before {
    content: "";
    position: absolute;
    inset: -7px;
    border: 1px dashed rgba(40,40,36,.35);
    border-radius: 50%;
}

.knob-line[b-whg39snh45] {
    position: absolute;
    top: 3px;
    left: 50%;
    width: 3px;
    height: 14px;
    margin-left: -1.5px;
    border-radius: 3px;
    background: #1d7d46;
    box-shadow: 0 0 2px rgba(0,0,0,.35);
    transform: rotate(var(--knob-angle, -135deg));
    transform-origin: 50% 26px;
    transition: transform .16s ease;
}

.pedal-control select[b-whg39snh45],
.pedal-control input[b-whg39snh45] {
    box-sizing: border-box;
    width: 100%;
    height: 34px;
    margin: 0;
    padding: 5px 25px 5px 9px;
    border: 1px solid #33352f;
    border-radius: 7px;
    outline: none;
    background-color: #22241f;
    color: #f5f5ef;
    font-family: inherit;
    font-size: 12px;
    line-height: normal;
    box-shadow:
        inset 0 1px 3px rgba(0,0,0,.65),
        0 1px 0 rgba(255,255,255,.55);
}

.pedal-control select[b-whg39snh45] {
    appearance: none;
    cursor: pointer;
    background-image:
        linear-gradient(45deg, transparent 50%, #e9e9e3 50%),
        linear-gradient(135deg, #e9e9e3 50%, transparent 50%);
    background-position:
        calc(100% - 13px) 14px,
        calc(100% - 9px) 14px;
    background-size: 4px 4px, 4px 4px;
    background-repeat: no-repeat;
}

.pedal-control input[b-whg39snh45] {
    padding-right: 9px;
    text-align: center;
    font-weight: 700;
}

.pedal-control select:focus[b-whg39snh45],
.pedal-control input:focus[b-whg39snh45] {
    border-color: #198754;
    box-shadow:
        0 0 0 2px rgba(25,135,84,.25),
        inset 0 1px 3px rgba(0,0,0,.65);
}

.pedal-control option[b-whg39snh45],
.pedal-control optgroup[b-whg39snh45] {
    background: #22241f;
    color: #f5f5ef;
}

.pedal-divider[b-whg39snh45] {
    position: relative;
    z-index: 1;
    height: 1px;
    margin: 19px 4px 16px;
    background: rgba(45,45,40,.65);
    box-shadow: 0 1px 0 rgba(255,255,255,.5);
}

.pedal-switch-row[b-whg39snh45] {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.pedal-switch[b-whg39snh45] {
    appearance: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #282a25;
    font-family: inherit;
    cursor: pointer;
}

.pedal-switch:disabled[b-whg39snh45] {
    opacity: .48;
    cursor: default;
}

.pedal-led[b-whg39snh45] {
    width: 14px;
    height: 14px;
    border: 2px solid #55564f;
    border-radius: 50%;
    box-shadow:
        inset 0 1px 2px rgba(255,255,255,.65),
        0 1px 2px rgba(0,0,0,.45);
}

.led-green[b-whg39snh45] {
    background: #28e864;
    box-shadow:
        0 0 8px rgba(40,232,100,.85),
        inset 0 1px 2px rgba(255,255,255,.8),
        0 1px 2px rgba(0,0,0,.4);
}

.led-red[b-whg39snh45] {
    background: #ed3131;
    box-shadow:
        0 0 7px rgba(237,49,49,.7),
        inset 0 1px 2px rgba(255,255,255,.8),
        0 1px 2px rgba(0,0,0,.4);
}

.pedal-led.led-pulse[b-whg39snh45] {
    animation: pedal-led-pulse-b-whg39snh45 .22s ease-out;
}

@keyframes pedal-led-pulse-b-whg39snh45 {
    0% {
        transform: scale(1);
        filter: brightness(1);
    }
    45% {
        transform: scale(1.45);
        filter: brightness(1.65);
    }
    100% {
        transform: scale(1);
        filter: brightness(1);
    }
}

.footswitch[b-whg39snh45] {
    position: relative;
    width: 44px;
    height: 44px;
    border: 4px solid #6c6b66;
    border-radius: 50%;
    background:
        radial-gradient(circle at 42% 32%, #f8f8f4 0 8%, #c6c5c0 38%, #807f7a 75%, #bebdb7 100%);
    box-shadow:
        0 4px 5px rgba(0,0,0,.34),
        inset 0 1px 2px rgba(255,255,255,.85),
        0 0 0 2px #40413d;
    transition: transform .08s ease, box-shadow .08s ease;
}

.pedal-switch:active .footswitch[b-whg39snh45] {
    transform: translateY(2px);
    box-shadow:
        0 1px 2px rgba(0,0,0,.35),
        inset 0 1px 3px rgba(0,0,0,.18),
        0 0 0 2px #40413d;
}

.switch-label[b-whg39snh45] {
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .4px;
}

.pedal-midi[b-whg39snh45] {
    position: relative;
    z-index: 1;
    margin-top: 18px;
    padding: 10px 11px 9px;
    border: 1px solid rgba(55,55,49,.48);
    border-radius: 8px;
    background: rgba(255,255,255,.22);
    box-shadow: inset 0 1px 2px rgba(255,255,255,.45);
}

.pedal-midi-title[b-whg39snh45] {
    margin-bottom: 7px;
    color: #343630;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .8px;
}

.pedal-emboss[b-whg39snh45] {
    position: relative;
    z-index: 1;
    margin: 18px 22px 0;
    color: rgba(70, 68, 62, .52);
    font-family: "Arial Narrow", Arial, sans-serif;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 1.15px;
    text-align: center;
    text-transform: uppercase;
    text-shadow:
        0 1px 0 rgba(255, 255, 255, .72),
        0 -1px 0 rgba(54, 51, 46, .28);
}

.resolved-grid[b-whg39snh45] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px 10px;
}

.resolved-item[b-whg39snh45] {
    display: grid;
    grid-template-columns: 15px 29px 1fr;
    align-items: center;
    min-width: 0;
    font-size: 10px;
    color: #343630;
}

.resolved-item strong[b-whg39snh45] {
    font-weight: 900;
}

.resolved-item .token[b-whg39snh45] {
    font-family: Consolas, monospace;
    font-weight: 700;
}

.pedal-screw[b-whg39snh45] {
    position: absolute;
    z-index: 2;
    width: 18px;
    height: 18px;
    border: 2px solid #111;
    border-radius: 50%;
    background:
        linear-gradient(45deg, transparent 43%, #111 44% 56%, transparent 57%),
        linear-gradient(-45deg, transparent 43%, #111 44% 56%, transparent 57%),
        radial-gradient(circle at 40% 35%, #666 0 15%, #292929 45%, #111 100%);
    box-shadow: 0 1px 2px rgba(0,0,0,.55);
}

.screw-tl[b-whg39snh45] { top: 15px; left: 15px; }
.screw-tr[b-whg39snh45] { top: 15px; right: 15px; }
.screw-bl[b-whg39snh45] { bottom: 15px; left: 15px; }
.screw-br[b-whg39snh45] { bottom: 15px; right: 15px; }

.pedal-error[b-whg39snh45] {
    position: relative;
    z-index: 1;
    margin: 14px 0 0;
}

/* =========================================================
   FRETBOARD SVG
   Kept as in the supplied design.
   ========================================================= */

.fretboard[b-whg39snh45] {
    display: block;
    width: 430px;
    max-width: 100%;
    height: auto;
    margin: 0;
    overflow: visible;
}

/* =========================================================
   STRINGS, NUT, FRETS AND MARKERS
   ========================================================= */

.string-line[b-whg39snh45] {
    stroke: #555;
    stroke-linecap: round;
}

.nut[b-whg39snh45] {
    stroke: #111;
    stroke-width: 7;
    stroke-linecap: round;
}

.fret-line[b-whg39snh45] {
    stroke: #aaa;
    stroke-width: 2;
}

.fret-marker[b-whg39snh45] {
    fill: #bbb;
}

/* =========================================================
   SVG HTML LABELS
   ========================================================= */

.svg-label[b-whg39snh45] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1;
    user-select: none;
}

.string-name[b-whg39snh45] {
    font-size: 14px;
    font-weight: 600;
    color: #222;
}

.fret-number[b-whg39snh45] {
    justify-content: flex-end;
    padding-right: 8px;
    font-size: 12px;
    color: #555;
}

.root-note[b-whg39snh45] {
    fill: #198754;
    stroke: white;
    stroke-width: 2;
}

.root-label[b-whg39snh45] {
    color: white;
    font-size: 13px;
    font-weight: 800;
}

.chord-note[b-whg39snh45] {
    fill: #222;
    stroke: white;
    stroke-width: 2;
}

.note-label[b-whg39snh45] {
    color: white;
    font-size: 11px;
    font-weight: 700;
}

.open-marker[b-whg39snh45] {
    fill: white;
    stroke: #222;
    stroke-width: 2;
}

.open-label[b-whg39snh45] {
    color: #222;
    font-size: 11px;
    font-weight: 800;
}

.muted-marker[b-whg39snh45] {
    color: #555;
    font-size: 21px;
    font-weight: 600;
}

/* =========================================================
   ERRORS
   ========================================================= */

.error[b-whg39snh45] {
    margin: 10px 0;
    padding: 10px 12px;
    background: #fee;
    border: 1px solid #daa;
    border-radius: 4px;
    color: #900;
    font-size: 12px;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1050px) {
    .studio-layout[b-whg39snh45] {
        grid-template-columns: 335px minmax(360px, 430px);
        gap: 30px;
    }

    .guitar-pedal[b-whg39snh45] {
        width: 335px;
    }

    .fretboard[b-whg39snh45] {
        width: 400px;
    }
}

@media (max-width: 800px) {
    .studio-layout[b-whg39snh45] {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .studio-left[b-whg39snh45],
    .studio-right[b-whg39snh45] {
        display: flex;
        justify-content: center;
    }

    .guitar-pedal[b-whg39snh45] {
        width: min(420px, 100%);
    }

    .fretboard[b-whg39snh45] {
        width: 430px;
        max-width: 100%;
        margin-top: 0;
    }
}

@media (max-width: 430px) {
    .guitar-page[b-whg39snh45] {
        padding: 14px;
    }

    .guitar-pedal[b-whg39snh45] {
        padding: 24px 18px 20px;
    }

    .pedal-control-grid[b-whg39snh45] {
        gap: 17px 12px;
    }

    .pedal-title[b-whg39snh45] {
        font-size: 28px;
    }

    .pedal-knob[b-whg39snh45] {
        width: 53px;
        height: 53px;
    }

    .resolved-grid[b-whg39snh45] {
        grid-template-columns: 1fr;
    }
}

/* Realistic dark fretboard treatment */
.fretboard-wood[b-whg39snh45] {
    fill: #2b1a13;
    stroke: #17100c;
    stroke-width: 3;
}

.fret-line[b-whg39snh45] {
    stroke: #d7d7d7;
    stroke-width: 3;
    filter: drop-shadow(0 1px 0 #666);
}

.nut[b-whg39snh45] {
    stroke: #e8e1ce;
    stroke-width: 9;
}

.string-line[b-whg39snh45] {
    stroke: #d6cdb8;
    filter: drop-shadow(1px 0 0 #5b5143);
}

.fret-marker[b-whg39snh45] {
    fill: #e5e5e2;
    stroke: #bdbdb8;
    stroke-width: 1;
}
/* /Components/Pages/Home.razor.rz.scp.css */
.home-page[b-3ry3c32osr] {
    --studio-accent: #bce9a3;
    --studio-muted: #a5aaa4;
    margin: 0 -12px;
    background: #0c0e0d;
    color: #f1f1e9;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.home-hero[b-3ry3c32osr] { position: relative; isolation: isolate; display: grid; grid-template-columns: 1.1fr 1fr; min-height: 490px; overflow: hidden; border-bottom: 1px solid #ffffff12; }
.hero-copy[b-3ry3c32osr] { position: relative; z-index: 2; padding: clamp(40px, 5vw, 88px) 0 clamp(36px, 4vw, 64px) clamp(24px, 4vw, 72px); }
.eyebrow[b-3ry3c32osr] { margin: 0 0 24px; font-size: .68rem; font-weight: 700; letter-spacing: .2em; color: var(--studio-accent); display: flex; align-items: center; gap: 10px; }
.studio-light[b-3ry3c32osr] { width: 6px; height: 6px; border-radius: 50%; background: var(--studio-accent); box-shadow: 0 0 12px #bce9a35c; }
h1[b-3ry3c32osr] { font-size: clamp(2.8rem, 4.9vw, 6.5rem); line-height: 1.04; letter-spacing: -.055em; font-weight: 600; margin: 0; }
h1 span[b-3ry3c32osr] { color: var(--studio-accent); }
.hero-description[b-3ry3c32osr] { max-width: 440px; color: #b6bbb4; font-size: clamp(.95rem, 1.1vw, 1.15rem); line-height: 1.8; margin: 25px 24px 28px 0; }
.hero-actions[b-3ry3c32osr] { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; }
.primary-action[b-3ry3c32osr], .secondary-action[b-3ry3c32osr] { display: inline-flex; align-items: center; justify-content: center; gap: 18px; min-height: 48px; font-size: .85rem; font-weight: 600; text-decoration: none; }
.primary-action[b-3ry3c32osr] { padding: 0 22px; border-radius: 6px; background: var(--studio-accent); color: #142010; transition: background .2s; }
.primary-action:hover[b-3ry3c32osr] { background: #d4f6c1; color: #142010; }
.secondary-action[b-3ry3c32osr] { color: #e1e3da; gap: 8px; }
.secondary-action:hover[b-3ry3c32osr] { color: var(--studio-accent); }
.hero-note[b-3ry3c32osr] { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: .68rem; color: #8d968b; margin-top: 32px; }
.note-divider[b-3ry3c32osr] { width: 3px; height: 3px; background: #727e6c; border-radius: 50%; }
.hero-art[b-3ry3c32osr] { position: absolute; inset: 0; min-width: 0; z-index: 0; }
.hero-art img[b-3ry3c32osr] { position: absolute; inset: 0; height: 100%; width: 100%; object-fit: cover; object-position: 48% center; }
.hero-art[b-3ry3c32osr]::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #0c0e0dee, #0c0e0d99 35%, transparent 70%), linear-gradient(0deg, #0c0e0d 0%, transparent 35%); }
.art-caption[b-3ry3c32osr] { position: absolute; z-index: 1; bottom: 34px; right: clamp(24px, 4vw, 72px); display: flex; align-items: center; gap: 12px; font-size: .55rem; letter-spacing: .15em; color: #c1b59e; }
.caption-rule[b-3ry3c32osr] { display: block; width: 28px; height: 1px; background: #a89b83; }
.studio-section[b-3ry3c32osr] { padding: 48px clamp(24px, 4vw, 72px) 0; scroll-margin-top: 24px; }
.section-heading[b-3ry3c32osr] { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 16px; margin-bottom: 26px; }
.section-heading .eyebrow[b-3ry3c32osr] { margin-bottom: 10px; color: #959f90; font-size: .61rem; }
.section-heading h2[b-3ry3c32osr] { font-size: clamp(1.65rem, 2.25vw, 2.8rem); letter-spacing: -.04em; margin: 0; font-weight: 500; }
.section-heading > p[b-3ry3c32osr] { color: var(--studio-muted); font-size: .8rem; margin: 0 0 4px; }
.app-grid[b-3ry3c32osr] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.app-tile[b-3ry3c32osr] { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid #ffffff15; border-radius: 12px; background: #151816; color: #f1f1e9; text-decoration: none; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.app-tile:hover[b-3ry3c32osr] { transform: translateY(-4px); color: #fff; border-color: #bce9a365; box-shadow: 0 18px 40px #0005; }
.tile-art[b-3ry3c32osr] { position: relative; overflow: hidden; aspect-ratio: 16 / 9; background: #1d211d; }
.tile-art[b-3ry3c32osr]::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, #0004, transparent 40%, #0002); pointer-events: none; }
.tile-art img[b-3ry3c32osr] { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.app-tile:hover .tile-art img[b-3ry3c32osr] { transform: scale(1.045); }
.app-type[b-3ry3c32osr] { position: absolute; top: 16px; left: 16px; z-index: 1; padding: 6px 9px; border: 1px solid #ffffff25; border-radius: 4px; background: #101511d9; color: #e6e7dc; font-size: .58rem; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; }
.tile-number[b-3ry3c32osr] { position: absolute; z-index: 1; right: 16px; top: 18px; color: #e5e6dba6; font: .65rem ui-monospace, monospace; letter-spacing: .08em; }
.tile-copy[b-3ry3c32osr] { flex: 1; display: flex; flex-direction: column; padding: 22px 24px 18px; }
.tile-heading[b-3ry3c32osr] { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tile-heading h3[b-3ry3c32osr] { margin: 0; font-size: clamp(1.12rem, 1.45vw, 1.7rem); font-weight: 500; letter-spacing: -.025em; }
.tile-heading > .bi[b-3ry3c32osr] { flex-shrink: 0; color: #95a28e; font-size: 1.1rem; }
.tile-copy > p[b-3ry3c32osr] { color: var(--studio-muted); font-size: .83rem; line-height: 1.7; margin: 12px 0 20px; max-width: 40ch; }
.tile-launch[b-3ry3c32osr] { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1px solid #ffffff0d; color: #c7d4be; font-size: .72rem; font-weight: 600; }
.launch-arrow[b-3ry3c32osr] { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: #242c23; transition: background .2s, color .2s; }
.app-tile:hover .launch-arrow[b-3ry3c32osr] { background: var(--studio-accent); color: #142010; }
.home-page a:focus-visible[b-3ry3c32osr] { outline: 3px solid var(--studio-accent); outline-offset: 5px; }
.studio-signoff[b-3ry3c32osr] { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 32px 0; color: #939c8c; }
.studio-signoff > .bi[b-3ry3c32osr] { color: var(--studio-accent); font-size: 1.5rem; }
.studio-signoff p[b-3ry3c32osr] { margin: 0; font-size: .78rem; }
.studio-signoff > span:last-child[b-3ry3c32osr] { margin-left: auto; font-size: .58rem; letter-spacing: .22em; color: #838c7e; }
@media (min-width: 1800px) { .app-grid[b-3ry3c32osr] { gap: 30px; } .tile-copy[b-3ry3c32osr] { padding: 28px; } }
@media (max-width: 1000px) { .app-grid[b-3ry3c32osr] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .home-hero[b-3ry3c32osr] { min-height: 460px; } .hero-copy[b-3ry3c32osr] { padding-top: 48px; padding-bottom: 40px; } .art-caption[b-3ry3c32osr] { display: none; } }
@media (max-width: 600px) {
    .home-page[b-3ry3c32osr] { margin: 0; }
    .home-hero[b-3ry3c32osr] { display: block; min-height: 0; }
    .hero-copy[b-3ry3c32osr] { padding: 48px 24px 34px; }
    .hero-art[b-3ry3c32osr] { position: absolute; inset: 0; margin: 0; z-index: -1; opacity: .28; }
    .hero-art[b-3ry3c32osr]::after { background: linear-gradient(90deg, #0c0e0d 0%, #0c0e0d66), linear-gradient(0deg, #0c0e0d, transparent); }
    .hero-description[b-3ry3c32osr] { margin-right: 0; max-width: 35ch; }
    .hero-actions[b-3ry3c32osr] { gap: 10px 20px; }
    .hero-note[b-3ry3c32osr] { margin-top: 24px; font-size: .63rem; }
    .studio-section[b-3ry3c32osr] { padding: 30px 20px 0; }
    .app-grid[b-3ry3c32osr] { grid-template-columns: minmax(0, 1fr); gap: 22px; }
    .tile-heading h3[b-3ry3c32osr] { font-size: 1.3rem; }
    .tile-copy[b-3ry3c32osr] { padding: 20px; }
    .studio-signoff > span:last-child[b-3ry3c32osr] { display: none; }
}
@media (prefers-reduced-motion: reduce) { .app-tile[b-3ry3c32osr], .tile-art img[b-3ry3c32osr], .launch-arrow[b-3ry3c32osr], .primary-action[b-3ry3c32osr] { transition: none; } .app-tile:hover[b-3ry3c32osr], .app-tile:hover .tile-art img[b-3ry3c32osr] { transform: none; } }
/* /Components/Pages/MIDI_Debug.razor.rz.scp.css */
.track-navigation[b-fkkumorqwb],
.track-detail[b-fkkumorqwb] {
    scroll-margin-top: 1rem;
}

.track-links[b-fkkumorqwb] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
    gap: 0.5rem 1rem;
}

.track-link[b-fkkumorqwb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
}

.track-link > span:first-child[b-fkkumorqwb] {
    overflow-wrap: anywhere;
}

.track-link .badge[b-fkkumorqwb] {
    flex-shrink: 0;
}
/* /Components/Pages/MIDI_Generate.razor.rz.scp.css */
/* MIDI Generator — matched to the MIDI Library visual system */
.midi-generator-page[b-1xplx0n6iq] {
    --gen-green: #7cff38;
    --gen-green-soft: #bdfca1;
    --gen-bg: #090b0a;
    --gen-panel: #101311;
    --gen-panel-2: #151916;
    --gen-line: #252b27;
    --gen-text: #f1f4ef;
    --gen-muted: #969e96;
    flex: 1;
    min-height: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 30px 34px 48px;
    color: var(--gen-text);
    background: #000;
}

.midi-generator-content[b-1xplx0n6iq] {
    width: 100%;
    max-width: 820px;
    min-width: 0;
    margin-inline: auto;
}

.midi-generator-page.has-background-image[b-1xplx0n6iq] {
    background-image: var(--generator-background-image);
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
}

.midi-generator-page h1[b-1xplx0n6iq] {
    margin: 0 0 22px;
    color: #f7f8f5;
    font-size: clamp(34px, 4vw, 52px);
    font-weight: 850;
    line-height: .95;
    letter-spacing: -.045em;
}

.midi-generator-page .nav-tabs[b-1xplx0n6iq] {
    max-width: 900px;
    margin: 0 0 22px !important;
    border-bottom: 1px solid var(--gen-line);
}

.midi-generator-page .nav-tabs .nav-link[b-1xplx0n6iq] {
    border: 1px solid transparent;
    border-bottom: 0;
    border-radius: 6px 6px 0 0;
    color: var(--gen-muted);
    background: transparent;
    font-size: 13px;
    font-weight: 700;
}

.midi-generator-page .nav-tabs .nav-link:hover[b-1xplx0n6iq] { color: var(--gen-green-soft); border-color: #29322b; }
.midi-generator-page .nav-tabs .nav-link.active[b-1xplx0n6iq] { color: var(--gen-green-soft); background: var(--gen-panel); border-color: var(--gen-line); }
.nav-tabs .nav-link[b-1xplx0n6iq] {
    cursor: pointer;
}

@@media (max-width: 767.98px) {
    .midi-generator-grid[b-1xplx0n6iq] {
        grid-template-columns: 1fr;
    }
}


.midi-generator-form[b-1xplx0n6iq] {
    display: grid;
    grid-template-columns: 160px minmax(0, 500px);
    gap: 14px;
    align-items: center;
    width: 100%;
    max-width: 820px;
    margin: 0;
    padding: 26px 28px 28px;
    border: 1px solid var(--gen-line);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(16,19,17,.98), rgba(12,15,13,.98));
    box-shadow: 0 10px 28px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.025);
}

    .midi-generator-form > *[b-1xplx0n6iq] {
        min-width: 0;
    }

.generator-text-input[b-1xplx0n6iq],
.generator-select[b-1xplx0n6iq],
.generator-textarea[b-1xplx0n6iq] {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.generator-text-input[b-1xplx0n6iq] {
    padding: 10px 12px;
}

.generator-number-input[b-1xplx0n6iq] {
    width: 120px;
    max-width: 100%;
    padding: 9px 11px;
    box-sizing: border-box;
}

.generator-select[b-1xplx0n6iq] {
    max-width: 360px;
    padding: 10px 12px;
    color: #e6ebe5;
    border: 1px solid #303833;
    border-radius: 6px;
    background-color: #101412;
}

.generator-drum-beat[b-1xplx0n6iq] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.generator-drum-beat .generator-select[b-1xplx0n6iq] {
    flex: 1;
}

.generator-drum-beat a[b-1xplx0n6iq] {
    flex-shrink: 0;
}

.generator-text-input[b-1xplx0n6iq], .generator-number-input[b-1xplx0n6iq], .generator-textarea[b-1xplx0n6iq] {
    color: #edf0ec;
    border: 1px solid #303833;
    border-radius: 6px;
    background: #101412;
}

.generator-text-input:focus[b-1xplx0n6iq], .generator-number-input:focus[b-1xplx0n6iq], .generator-select:focus[b-1xplx0n6iq], .generator-textarea:focus[b-1xplx0n6iq] {
    outline: none;
    border-color: #4b7d38;
    box-shadow: 0 0 0 3px rgba(124,255,56,.08), inset 0 1px 4px rgba(0,0,0,.5);
}

.midi-generator-form label[b-1xplx0n6iq], .song-beta-panel label[b-1xplx0n6iq] { color: #cbd2cb; font-size: 13px; font-weight: 700; }

.generator-checkbox[b-1xplx0n6iq] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.generator-top-label[b-1xplx0n6iq] {
    align-self: start;
    padding-top: 7px;
}

.generator-wide-field[b-1xplx0n6iq] {
    width: 100%;
    min-width: 0;
}

.generator-textarea[b-1xplx0n6iq] {
    display: block;
    min-height: 92px;
    padding: 11px 12px;
    font-family: monospace;
    resize: vertical;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.generator-field-note[b-1xplx0n6iq] {
    grid-column: 2;
    min-width: 0;
    margin-top: -8px;
    color: var(--gen-muted);
    font-size: 13px;
    overflow-wrap: anywhere;
}

.generator-field-help[b-1xplx0n6iq] {
    margin-top: 5px;
    color: #858e86;
    font-size: 13px;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.generator-example-separator[b-1xplx0n6iq] {
    margin: 0 6px;
}

.generator-actions[b-1xplx0n6iq] {
    justify-self: start;
}

.generator-status[b-1xplx0n6iq] {
    margin-top: 12px;
}

.generator-result-actions[b-1xplx0n6iq] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.generated-progression[b-1xplx0n6iq] {
    width: 100%;
    max-width: 700px;
    margin-top: 20px;
}

.generated-progression-chords[b-1xplx0n6iq] {
    margin-top: 8px;
    font-family: monospace;
    font-size: 16px;
    overflow-wrap: anywhere;
}

.generated-progression-summary[b-1xplx0n6iq] {
    margin-top: 8px;
    color: #666;
}

.song-beta-panel[b-1xplx0n6iq] {
    width: 100%;
    max-width: 900px;
}

.song-file-select[b-1xplx0n6iq] {
    width: 100%;
    max-width: 400px;
}

.song-json-textarea[b-1xplx0n6iq] {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 320px;
    box-sizing: border-box;
    font-family: monospace;
    resize: vertical;
    overflow-wrap: anywhere;
}

/*
 * Tablet / phone.
 *
 * Change the generator from:
 *
 * Label | Control
 *
 * to:
 *
 * Label
 * Control
 */
@media (max-width: 600px) {

    .midi-generator-form[b-1xplx0n6iq] {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
        max-width: 100%;
    }

        .midi-generator-form label[b-1xplx0n6iq] {
            margin-top: 8px;
        }

    .generator-number-input[b-1xplx0n6iq],
    .generator-select[b-1xplx0n6iq],
    .generator-text-input[b-1xplx0n6iq],
    .generator-textarea[b-1xplx0n6iq] {
        width: 100%;
        max-width: 100%;
    }

    .generator-field-note[b-1xplx0n6iq] {
        grid-column: 1;
        margin-top: -2px;
        margin-bottom: 6px;
    }

    .generator-top-label[b-1xplx0n6iq] {
        padding-top: 0;
    }

    .generator-button-spacer[b-1xplx0n6iq] {
        display: none;
    }

    .generator-actions[b-1xplx0n6iq] {
        justify-self: stretch;
        margin-top: 8px;
    }

    .generator-actions .btn[b-1xplx0n6iq] {
        width: 100%;
    }

    .generator-result-actions[b-1xplx0n6iq] {
        flex-direction: column;
    }

        .generator-result-actions .btn[b-1xplx0n6iq] {
            width: 100%;
        }

    .song-file-select[b-1xplx0n6iq] {
        max-width: 100%;
    }
}

.generator-actions .btn[b-1xplx0n6iq] { min-height: 40px; }
.midi-generator-page .btn-success[b-1xplx0n6iq] {
    border-color: #278335;
    color: white;
    background: linear-gradient(180deg, #24bd54, #138035);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.19), 0 2px 0 #073b18;
}
.midi-generator-page .btn-secondary[b-1xplx0n6iq] {
    border-color: #313a34;
    background: linear-gradient(180deg, #222824, #141815);
}
.generator-status[b-1xplx0n6iq], .generated-progression[b-1xplx0n6iq], .song-beta-panel[b-1xplx0n6iq] {
    padding: 18px 22px;
    border: 1px solid var(--gen-line);
    border-radius: 8px;
    background: rgba(16,19,17,.9);
}
.generator-status[b-1xplx0n6iq] { max-width: 820px; color: var(--gen-green-soft); }
.generated-progression[b-1xplx0n6iq] { max-width: 820px; }
.generated-progression-chords[b-1xplx0n6iq] { color: var(--gen-green-soft); }
.generated-progression-summary[b-1xplx0n6iq] { color: var(--gen-muted); }
.song-beta-panel[b-1xplx0n6iq] { max-width: 900px; }
.song-beta-panel .card-body[b-1xplx0n6iq] { padding: 0; }
.song-beta-panel .form-control[b-1xplx0n6iq], .song-beta-panel .form-select[b-1xplx0n6iq] { color: #edf0ec; border-color: #303833; background-color: #101412; }
.song-beta-panel .form-control:focus[b-1xplx0n6iq], .song-beta-panel .form-select:focus[b-1xplx0n6iq] { border-color: #4b7d38; box-shadow: 0 0 0 3px rgba(124,255,56,.08); }
/* /Components/Pages/MIDI_Library.razor.rz.scp.css */
/* =========================================================
   Duncan Beat - MIDI Library
   ========================================================= */

.midi-library-page[b-9y42di8gik] {
    --lib-green: #7cff38;
    --lib-green-hot: #9aff55;
    --lib-green-soft: #bdfca1;
    --lib-bg: #090b0a;
    --lib-bg-2: #0d100e;
    --lib-panel: #101311;
    --lib-panel-2: #151916;
    --lib-line: #252b27;
    --lib-text: #f1f4ef;
    --lib-muted: #969e96;

    flex: 1;
    min-width: 0;
    min-height: 0;
    color: var(--lib-text);
    background:
        radial-gradient(circle at 84% 2%, rgba(57, 255, 63, .045), transparent 24rem),
        linear-gradient(180deg, #090b0a 0%, #080a09 100%);
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}


/* =========================================================
   HERO
   ========================================================= */

.library-hero[b-9y42di8gik] {
    position: relative;
    min-height: 150px;
    overflow: hidden;
    border-bottom: 1px solid var(--lib-line);
    background:
        linear-gradient(90deg,
            rgba(7, 9, 8, 1) 0%,
            rgba(7, 9, 8, .98) 28%,
            rgba(7, 9, 8, .72) 49%,
            rgba(7, 9, 8, .18) 73%,
            rgba(7, 9, 8, .35) 100%),
        url("/images/midi-library-hero.jpg") center 51% / cover no-repeat;
}

.library-hero[b-9y42di8gik]::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.3)),
        linear-gradient(90deg, transparent 55%, rgba(124,255,56,.025));
}

.library-hero-content[b-9y42di8gik] {
    position: relative;
    z-index: 1;
    display: flex;
    min-height: 150px;
    flex-direction: column;
    justify-content: center;
    padding: 24px 34px;
}

.library-title-row[b-9y42di8gik] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
}

.library-title-row h1[b-9y42di8gik] {
    margin: 0;
    color: #f7f8f5;
    font-size: clamp(34px, 4vw, 58px);
    font-weight: 850;
    line-height: .95;
    letter-spacing: -.045em;
}

.library-title-row h1 span[b-9y42di8gik] {
    color: var(--lib-green-soft);
}

.library-file-count[b-9y42di8gik] {
    padding: 9px 15px 8px;
    border: 1px solid #254d1b;
    border-radius: 6px;
    color: var(--lib-green-hot);
    background: rgba(10, 24, 9, .72);
    box-shadow:
        inset 0 0 14px rgba(124,255,56,.04),
        0 0 12px rgba(124,255,56,.03);
    font: 800 16px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: .035em;
}

.library-hero p[b-9y42di8gik] {
    max-width: 540px;
    margin: 14px 0 0;
    color: #a9b0aa;
    font-size: 17px;
    line-height: 1.4;
}


/* =========================================================
   TOOLBAR
   ========================================================= */

.library-toolbar[b-9y42di8gik] {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 16px 34px;
    border-bottom: 1px solid var(--lib-line);
    background:
        linear-gradient(180deg, rgba(20,24,21,.98), rgba(12,15,13,.98));
}

.library-search[b-9y42di8gik] {
    position: relative;
    min-width: 0;
    flex: 1 1 520px;
    max-width: 560px;
}

.library-search svg[b-9y42di8gik] {
    position: absolute;
    top: 50%;
    left: 15px;
    width: 20px;
    height: 20px;
    fill: #a1aaa1;
    transform: translateY(-50%);
    pointer-events: none;
}

.library-search input[b-9y42di8gik] {
    width: 100%;
    height: 43px;
    padding: 0 16px 0 46px;
    border: 1px solid #303833;
    border-radius: 6px;
    outline: none;
    color: #edf0ec;
    background: #101412;
    box-shadow: inset 0 1px 4px rgba(0,0,0,.5);
    font-size: 14px;
    transition:
        border-color .12s ease,
        box-shadow .12s ease,
        background .12s ease;
}

.library-search input[b-9y42di8gik]::placeholder {
    color: #7c857e;
}

.library-search input:focus[b-9y42di8gik] {
    border-color: #4b7d38;
    background: #121713;
    box-shadow:
        0 0 0 3px rgba(124,255,56,.08),
        inset 0 1px 4px rgba(0,0,0,.5);
}

.library-toolbar-right[b-9y42di8gik] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

.sort-label[b-9y42di8gik],
.page-size-control label[b-9y42di8gik] {
    margin: 0;
    color: #9ca49d;
    font-size: 13px;
    white-space: nowrap;
}

.library-select[b-9y42di8gik] {
    height: 43px;
    min-width: 190px;
    padding: 0 38px 0 13px;
    border: 1px solid #303833;
    border-radius: 6px;
    outline: none;
    color: #e6ebe5;
    background-color: #101412;
    font-size: 13px;
}

.library-select:focus[b-9y42di8gik] {
    border-color: #4b7d38;
    box-shadow: 0 0 0 3px rgba(124,255,56,.07);
}


/* =========================================================
   TABLE
   ========================================================= */

.library-table-wrap[b-9y42di8gik] {
    overflow-x: auto;
    padding: 0 26px;
}

.library-table[b-9y42di8gik] {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    color: var(--lib-text);
    background: transparent;
}

.library-table thead th[b-9y42di8gik] {
    height: 45px;
    padding: 0 14px;
    border-bottom: 1px solid #29302b;
    color: #9da59e;
    background: #0c0f0d;
    font-size: 11px;
    font-weight: 800;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.library-table tbody tr[b-9y42di8gik] {
    border-bottom: 1px solid #222824;
    background: rgba(14,17,15,.78);
    transition:
        background .12s ease,
        box-shadow .12s ease;
}

.library-table tbody tr:nth-child(even)[b-9y42di8gik] {
    background: rgba(17,21,18,.9);
}

.library-table tbody tr:hover[b-9y42di8gik] {
    background:
        linear-gradient(90deg, rgba(28, 69, 22, .26), rgba(19,25,21,.93) 36%, rgba(16,20,17,.92));
    box-shadow: inset 2px 0 0 #69d53c;
}

.library-table td[b-9y42di8gik] {
    height: 56px;
    padding: 7px 14px;
    vertical-align: middle;
    color: #dce1dc;
    font-size: 13px;
}

.file-cell[b-9y42di8gik] {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 13px;
}

.midi-file-icon[b-9y42di8gik] {
    position: relative;
    display: grid;
    flex: 0 0 31px;
    width: 31px;
    height: 36px;
    place-items: end center;
    padding-bottom: 5px;
    border: 1px solid #72ad58;
    border-radius: 3px;
    color: #11200d;
    background:
        linear-gradient(135deg, transparent 0 7px, #b8ef9c 7px) top right / 100% 100% no-repeat;
    box-shadow:
        inset 0 -5px 9px rgba(46,129,24,.17),
        0 1px 2px rgba(0,0,0,.5);
}

.midi-file-icon[b-9y42di8gik]::before {
    content: "";
    position: absolute;
    top: -1px;
    right: -1px;
    width: 9px;
    height: 9px;
    border-left: 1px solid #72ad58;
    border-bottom: 1px solid #72ad58;
    background: #0d100e;
    clip-path: polygon(0 0, 100% 100%, 0 100%);
}

.midi-file-icon span[b-9y42di8gik] {
    font: 900 7px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    letter-spacing: -.02em;
}

.file-copy[b-9y42di8gik] {
    min-width: 0;
    flex: 1;
}

.file-title[b-9y42di8gik] {
    overflow: hidden;
    color: #f0f3ef;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.file-mobile-meta[b-9y42di8gik] {
    display: none;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
    color: #818981;
    font-size: 11px;
}

.created-column[b-9y42di8gik] {
    width: 240px;
    white-space: nowrap;
}

.size-column[b-9y42di8gik] {
    width: 120px;
    white-space: nowrap;
}

.actions-column[b-9y42di8gik] {
    width: 280px;
}

.midi-actions[b-9y42di8gik] {
    white-space: nowrap;
}

.action-group[b-9y42di8gik] {
    display: flex;
    align-items: center;
    gap: 10px;
}


/* =========================================================
   ACTION BUTTONS
   ========================================================= */

.library-action[b-9y42di8gik] {
    display: inline-flex;
    height: 36px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 14px;
    border: 1px solid #313a34;
    border-radius: 5px;
    color: #e7ebe7;
    background: linear-gradient(180deg, #222824, #141815);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.05),
        0 2px 0 rgba(0,0,0,.42);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    transition:
        transform .08s ease,
        filter .08s ease,
        border-color .08s ease;
}

.library-action:hover[b-9y42di8gik] {
    color: white;
    filter: brightness(1.14);
    transform: translateY(-1px);
}

.library-action:active[b-9y42di8gik] {
    transform: translateY(1px);
}

.library-action svg[b-9y42di8gik] {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.play-action[b-9y42di8gik] {
    min-width: 92px;
    border-color: #278335;
    color: white;
    background:
        linear-gradient(180deg, #24bd54, #138035);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.19),
        0 2px 0 #073b18,
        0 0 12px rgba(55,255,91,.08);
}

.debug-action[b-9y42di8gik] {
    min-width: 78px;
}

.icon-action[b-9y42di8gik] {
    width: 42px;
    padding: 0;
}


/* =========================================================
   EMPTY STATE
   ========================================================= */

.library-empty[b-9y42di8gik] {
    display: flex;
    min-height: 320px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    color: #8f978f;
    text-align: center;
}

.library-empty h3[b-9y42di8gik] {
    margin: 15px 0 5px;
    color: #e6eae5;
    font-size: 20px;
}

.library-empty p[b-9y42di8gik] {
    margin: 0;
}

.library-loading[b-9y42di8gik] {
    display: flex;
    min-height: 320px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    color: #a2aaa2;
}

.library-loading p[b-9y42di8gik] {
    margin: 0;
}

.loading-spinner[b-9y42di8gik] {
    width: 30px;
    height: 30px;
    border: 3px solid #293329;
    border-top-color: var(--lib-green);
    border-radius: 50%;
    animation: midi-library-spin-b-9y42di8gik .8s linear infinite;
}

@keyframes midi-library-spin-b-9y42di8gik {
    to { transform: rotate(360deg); }
}

.empty-midi-icon[b-9y42di8gik] {
    display: grid;
    width: 58px;
    height: 66px;
    place-items: center;
    border: 1px solid #497f35;
    border-radius: 5px;
    color: #88e75d;
    background: #10180e;
    font: 900 12px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}


/* =========================================================
   PAGINATION
   ========================================================= */

.library-pagination[b-9y42di8gik] {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 20px;
    padding: 18px 34px 28px;
    border-top: 1px solid #151a17;
    color: #a2aaa2;
    background: #090b0a;
    font-size: 12px;
}

.pagination-controls[b-9y42di8gik] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

.page-button[b-9y42di8gik] {
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    border: 1px solid #2c332f;
    border-radius: 5px;
    color: #d4d9d4;
    background: linear-gradient(#181d19, #101311);
    cursor: pointer;
    transition:
        border-color .1s ease,
        color .1s ease,
        box-shadow .1s ease,
        background .1s ease;
}

.page-button:hover:not(:disabled)[b-9y42di8gik] {
    border-color: #4c6f3c;
    color: white;
}

.page-button.active[b-9y42di8gik] {
    border-color: #6edb3e;
    color: #eaffdf;
    background: #132411;
    box-shadow:
        0 0 0 1px rgba(124,255,56,.18),
        0 0 10px rgba(124,255,56,.16);
}

.page-button:disabled[b-9y42di8gik] {
    opacity: .35;
    cursor: default;
}

.page-arrow[b-9y42di8gik] {
    font-size: 23px;
    line-height: 1;
}

.page-size-control[b-9y42di8gik] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-self: end;
    gap: 10px;
}

.page-size-select[b-9y42di8gik] {
    min-width: 88px;
    width: 88px;
    height: 38px;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {

    .library-hero[b-9y42di8gik] {
        min-height: 132px;
    }

    .library-hero-content[b-9y42di8gik] {
        min-height: 132px;
        padding: 20px;
    }

    .library-toolbar[b-9y42di8gik] {
        padding: 14px 20px;
    }

    .library-table-wrap[b-9y42di8gik] {
        padding: 0 14px;
    }

    .created-column[b-9y42di8gik] {
        width: 185px;
    }

    .actions-column[b-9y42di8gik] {
        width: 250px;
    }

    .library-pagination[b-9y42di8gik] {
        grid-template-columns: 1fr;
        justify-items: center;
        padding: 18px 20px 25px;
    }

    .pagination-summary[b-9y42di8gik],
    .page-size-control[b-9y42di8gik] {
        justify-self: center;
    }
}


@media (max-width: 1000px) {

    .library-hero[b-9y42di8gik] {
        background-position: 66% 50%;
    }

    .library-title-row[b-9y42di8gik] {
        gap: 12px;
    }

    .library-file-count[b-9y42di8gik] {
        padding: 7px 10px;
        font-size: 12px;
    }

    .library-hero p[b-9y42di8gik] {
        margin-top: 9px;
        font-size: 14px;
    }

    .library-toolbar[b-9y42di8gik] {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .library-search[b-9y42di8gik] {
        flex-basis: auto;
        max-width: none;
    }

    .library-toolbar-right[b-9y42di8gik] {
        width: 100%;
        margin-left: 0;
    }

    .library-toolbar-right .library-select[b-9y42di8gik] {
        flex: 1;
        min-width: 0;
    }

    .created-column[b-9y42di8gik],
    .size-column[b-9y42di8gik] {
        display: none;
    }

    .actions-column[b-9y42di8gik] {
        width: 215px;
    }

    .file-mobile-meta[b-9y42di8gik] {
        display: flex;
    }

    .action-group[b-9y42di8gik] {
        gap: 6px;
    }

    .library-action[b-9y42di8gik] {
        padding: 0 10px;
    }

    .play-action[b-9y42di8gik] {
        min-width: 74px;
    }

    .debug-action[b-9y42di8gik] {
        min-width: 62px;
    }
}


@media (max-width: 720px) {

    .library-hero-content[b-9y42di8gik] {
        padding: 18px 14px;
    }

    .library-toolbar[b-9y42di8gik] {
        padding: 12px 14px;
    }

    .sort-label[b-9y42di8gik] {
        display: none;
    }

    .library-table-wrap[b-9y42di8gik] {
        padding: 0;
    }

    .library-table thead[b-9y42di8gik] {
        display: none;
    }

    .library-table[b-9y42di8gik],
    .library-table tbody[b-9y42di8gik],
    .library-table tr[b-9y42di8gik],
    .library-table td[b-9y42di8gik] {
        display: block;
        width: 100%;
    }

    .library-table tbody tr[b-9y42di8gik] {
        padding: 16px 14px;
    }

    .library-table td[b-9y42di8gik] {
        height: auto;
        padding: 0;
    }

    .library-table td.created-column[b-9y42di8gik],
    .library-table td.size-column[b-9y42di8gik] {
        display: none;
    }

    .library-table td.actions-column[b-9y42di8gik] {
        margin-top: 12px;
    }

    .file-cell[b-9y42di8gik] {
        align-items: flex-start;
    }

    .file-title[b-9y42di8gik] {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .library-search input[b-9y42di8gik],
    .library-select[b-9y42di8gik] {
        font-size: 16px;
        min-height: 44px;
    }

    .action-group[b-9y42di8gik] {
        width: 100%;
        flex-wrap: wrap;
    }

    .library-action[b-9y42di8gik] {
        height: 44px;
    }

    .icon-action[b-9y42di8gik] {
        width: 44px;
    }

    .play-action[b-9y42di8gik] {
        flex: 1;
    }

    .library-pagination[b-9y42di8gik] {
        padding-inline: 12px;
        gap: 14px;
        text-align: center;
    }

    .pagination-controls[b-9y42di8gik] {
        gap: 4px;
    }

    .page-button[b-9y42di8gik] {
        min-width: 44px;
        height: 44px;
        padding: 0 7px;
    }
}
/* /Components/Pages/MIDI_Player.razor.rz.scp.css */


.midi-player-page[b-se8kj9cw7o] {
    --page-background: #050505;
    --panel-background: rgba(20, 20, 20, 0.94);
    --panel-background-light: #1c1c1c;
    --panel-border: rgba(255, 255, 255, 0.1);
    --text-primary: #ffffff;
    --text-secondary: #a9a9a9;
    --text-muted: #777777;
    --accent: #22d36b;
    --accent-bright: #45f48a;
    --accent-dark: #0a9e47;
    --danger: #ff4f5e;
    --warning: #ffbd3f;
    width: calc(100% + 24px);
    min-height: 100vh;
    margin: 0 -12px;
    padding: 28px 20px 40px;
    box-sizing: border-box;
    color: var(--text-primary);
    background-color: #000;
    background-image: var(--player-background-image, none);
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.player-header[b-se8kj9cw7o] {
    width: min(1100px, 100%);
    margin: 0 auto 26px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
}

.logo-link[b-se8kj9cw7o] {
    display: inline-block;
    text-decoration: none;
}

.player-logo[b-se8kj9cw7o] {
    display: block;
    width: min(320px, 75vw);
    height: auto;
    filter: drop-shadow(0 8px 22px rgba(0, 0, 0, 0.8)) drop-shadow(0 0 18px rgba(34, 211, 107, 0.15));
    transition: transform 0.2s ease, filter 0.2s ease;
}

.logo-link:hover .player-logo[b-se8kj9cw7o] {
    transform: scale(1.015);
    filter: drop-shadow(0 8px 22px rgba(0, 0, 0, 0.8)) drop-shadow(0 0 24px rgba(34, 211, 107, 0.3));
}

.song-heading[b-se8kj9cw7o] {
    max-width: 900px;
}

.song-heading-label[b-se8kj9cw7o],
.eyebrow[b-se8kj9cw7o],
.bar-display-label[b-se8kj9cw7o],
.key-shift-label[b-se8kj9cw7o] {
    color: var(--accent);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.song-title[b-se8kj9cw7o] {
    margin: 4px 0 0;
    color: var(--text-primary);
    font-size: clamp(1.45rem, 4vw, 2.4rem);
    font-weight: 750;
    line-height: 1.15;
    overflow-wrap: anywhere;
    white-space: pre-line;
}

.song-title-context[b-se8kj9cw7o] {
    display: block;
    margin-top: 5px;
    color: var(--text-secondary);
    font-size: .58em;
    font-weight: 600;
}

.youtube-mode-button[b-se8kj9cw7o] {
    margin-top: 13px;
    padding: 8px 14px;
    border: 1px solid rgba(34, 211, 107, .45);
    border-radius: 7px;
    color: #b9ffd4;
    background: rgba(15, 55, 31, .72);
    font-size: .78rem;
    font-weight: 750;
    cursor: pointer;
}

.youtube-mode-button:hover[b-se8kj9cw7o],
.youtube-mode-button[aria-pressed="true"][b-se8kj9cw7o] {
    color: #06180e;
    background: var(--accent-bright);
}

.youtube-mode .player-tabs[b-se8kj9cw7o],
.youtube-mode .tempo-panel[b-se8kj9cw7o],
.youtube-mode .pause-button[b-se8kj9cw7o] {
    display: none;
}

.youtube-mode .stop-button[b-se8kj9cw7o] {
    display: inline-flex;
}

.resolved-track-info[b-se8kj9cw7o] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 28px;
}

.resolved-track-card[b-se8kj9cw7o] {
    padding: 12px 14px;
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.035);
}

.resolved-track-values[b-se8kj9cw7o] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-top: 5px;
    color: var(--text-secondary);
    font-size: .78rem;
}

.player-shell[b-se8kj9cw7o] {
    width: min(1100px, 100%);
    margin: 0 auto;
}

.player-tabs[b-se8kj9cw7o] {
    display: flex;
    gap: 8px;
    padding: 7px;
    margin-bottom: 18px;
    border: 1px solid var(--panel-border);
    border-radius: 14px;
    background: rgba(12, 12, 12, 0.86);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.035);
    backdrop-filter: blur(12px);
}

    .player-tabs.nav-tabs[b-se8kj9cw7o] {
        border-bottom: 1px solid var(--panel-border);
    }

    .player-tabs .nav-item[b-se8kj9cw7o] {
        flex: 1;
    }

    .player-tabs .nav-link[b-se8kj9cw7o] {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        padding: 11px 18px;
        color: var(--text-secondary);
        border: 0;
        border-radius: 9px;
        background: transparent;
        font-weight: 700;
        transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    }

        .player-tabs .nav-link:hover[b-se8kj9cw7o] {
            color: var(--text-primary);
            background: rgba(255, 255, 255, 0.06);
        }

        .player-tabs .nav-link.active[b-se8kj9cw7o] {
            color: #06160d;
            background: linear-gradient( 135deg, var(--accent-bright), var(--accent) );
            box-shadow: 0 8px 22px rgba(34, 211, 107, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.45);
        }

        .player-tabs .nav-link:active[b-se8kj9cw7o] {
            transform: translateY(1px);
        }

.tab-icon[b-se8kj9cw7o] {
    font-size: 0.85rem;
}

@media (max-width: 700px) {
    .player-tabs[b-se8kj9cw7o] {
        gap: 4px;
    }

    .player-tabs .nav-link[b-se8kj9cw7o] {
        gap: 0;
        padding: 11px 8px;
        font-size: 1rem;
    }

    .player-tabs .tab-label[b-se8kj9cw7o] {
        display: none;
    }
}

.player-panel[b-se8kj9cw7o] {
    padding: clamp(18px, 4vw, 30px);
    border: 1px solid var(--panel-border);
    border-radius: 20px;
    background: linear-gradient( 145deg, rgba(30, 30, 30, 0.96), rgba(15, 15, 15, 0.97) );
    box-shadow: 0 26px 70px rgba(0, 0, 0, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.045);
    backdrop-filter: blur(14px);
}

.player-panel.playback-panel[b-se8kj9cw7o] {
    background: linear-gradient(145deg, rgba(30, 30, 30, 0.7), rgba(15, 15, 15, 0.75));
    backdrop-filter: blur(4px);
}

.playback-panel .bar-display[b-se8kj9cw7o],
.playback-panel .tempo-panel[b-se8kj9cw7o] {
    background-color: #1c1c1c;
}

.midi-out-grid[b-se8kj9cw7o] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}

.midi-out-card[b-se8kj9cw7o] {
    padding: 18px;
    border: 1px solid var(--panel-border);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.035);
}

.midi-out-label[b-se8kj9cw7o] {
    display: block;
    margin-bottom: 9px;
    font-weight: 700;
}

.midi-device-row[b-se8kj9cw7o] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
}

.midi-out-select[b-se8kj9cw7o] {
    width: 100%;
    min-height: 42px;
    padding: 8px 11px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    color: var(--text-primary);
    background: rgba(18, 22, 31, 0.95);
}

.midi-out-status[b-se8kj9cw7o],
.midi-out-help[b-se8kj9cw7o] {
    margin: 11px 0 0;
    color: var(--text-secondary);
    line-height: 1.5;
}

.midi-out-note[b-se8kj9cw7o] {
    margin-top: 16px;
    padding: 12px 14px;
    border-left: 3px solid var(--accent);
    border-radius: 6px;
    color: var(--text-secondary);
    background: rgba(34, 211, 107, 0.08);
}

.midi-latency-control[b-se8kj9cw7o] {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--panel-border);
}

.midi-latency-scale[b-se8kj9cw7o] {
    display: flex;
    justify-content: space-between;
    margin-top: 5px;
    color: var(--text-muted);
    font-size: 0.76rem;
}

.transport-section[b-se8kj9cw7o] {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 22px;
    flex-wrap: wrap;
    padding-bottom: 25px;
    margin-bottom: 25px;
    border-bottom: 1px solid var(--panel-border);
}

.transport-buttons[b-se8kj9cw7o] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.transport-button[b-se8kj9cw7o] {
    min-width: 115px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 12px 20px;
    border: 1px solid transparent;
    border-radius: 999px;
    color: #ffffff;
    font-size: 0.96rem;
    font-weight: 750;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
    transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
}

    .transport-button:hover[b-se8kj9cw7o] {
        transform: translateY(-2px);
        filter: brightness(1.08);
    }

    .transport-button:active[b-se8kj9cw7o] {
        transform: translateY(0);
    }

.transport-button:not(.active)[b-se8kj9cw7o] {
    color: #c4c4c4;
    border-color: #555;
    background: linear-gradient(135deg, #393939, #272727);
}

.play-button.active[b-se8kj9cw7o] {
    color: #06180e;
    background: linear-gradient( 135deg, var(--accent-bright), var(--accent) );
    box-shadow: 0 12px 28px rgba(34, 211, 107, 0.24);
}

.pause-button.active[b-se8kj9cw7o] {
    color: #231700;
    background: linear-gradient( 135deg, #ffd874, var(--warning) );
}

.stop-button.active[b-se8kj9cw7o] {
    background: linear-gradient( 135deg, #ff7782, var(--danger) );
}

.transport-icon[b-se8kj9cw7o] {
    font-size: 0.9rem;
}

.bar-display[b-se8kj9cw7o] {
    min-width: 190px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 14px 22px;
    border: 1px solid rgba(34, 211, 107, 0.22);
    border-radius: 14px;
    background: linear-gradient( 145deg, rgba(34, 211, 107, 0.11), rgba(34, 211, 107, 0.025) );
    text-align: center;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 12px 30px rgba(0, 0, 0, 0.2);
}

.bar-number[b-se8kj9cw7o] {
    margin-top: 3px;
    color: var(--text-primary);
    font-size: clamp(1.65rem, 4vw, 2.2rem);
    font-weight: 850;
    letter-spacing: -0.035em;
}

.section-heading[b-se8kj9cw7o],
.tempo-heading[b-se8kj9cw7o] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 17px;
}

    .section-heading h2[b-se8kj9cw7o],
    .tempo-heading h2[b-se8kj9cw7o] {
        margin: 2px 0 0;
        color: var(--text-primary);
        font-size: 1.45rem;
        font-weight: 760;
    }

.chord-count[b-se8kj9cw7o],
.track-count[b-se8kj9cw7o] {
    padding: 6px 11px;
    border: 1px solid var(--panel-border);
    border-radius: 999px;
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.04);
    font-size: 0.78rem;
    font-weight: 650;
}

.chord-grid[b-se8kj9cw7o] {
    display: grid;
    grid-template-columns: repeat( auto-fit, minmax(105px, 1fr) );
    gap: 11px;
    margin-bottom: 28px;
}

.chord-pill.active-even-bar[b-se8kj9cw7o] {
    filter: brightness(0.75);
}

.chord-pill[b-se8kj9cw7o] {
    text-decoration: none;
    position: relative;
    overflow: hidden;
    min-height: 94px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 13px 12px;
    border: 1px solid var(--panel-border);
    border-radius: 13px;
    color: var(--text-primary);
    background: linear-gradient( 145deg, #242424, #161616 );
    text-align: center;
    box-shadow: 0 11px 26px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

    .chord-pill:hover[b-se8kj9cw7o] {
        transform: translateY(-2px);
        border-color: rgba(255, 255, 255, 0.2);
    }

    .chord-pill.active[b-se8kj9cw7o] {
        z-index: 2;
        color: #06170d;
        border-color: rgba(69, 244, 138, 0.95);
        background: linear-gradient( 145deg, var(--accent-bright), var(--accent) );
        transform: translateY(-3px) scale(1.035);
        box-shadow: 0 15px 34px rgba(34, 211, 107, 0.28), 0 0 28px rgba(34, 211, 107, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.5);
    }

.chord-name[b-se8kj9cw7o] {
    font-size: 1.32rem;
    font-weight: 850;
    letter-spacing: -0.025em;
}

.chord-duration[b-se8kj9cw7o] {
    margin-top: 3px;
    color: var(--text-secondary);
    font-size: 0.76rem;
    font-weight: 600;
}

.chord-pill.active .chord-duration[b-se8kj9cw7o] {
    color: rgba(2, 38, 19, 0.75);
}

.chord-progress[b-se8kj9cw7o] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: rgba(255, 255, 255, 0.08);
}

.chord-pill.active .chord-progress[b-se8kj9cw7o] {
    background: rgba(0, 68, 31, 0.44);
}

.tempo-panel[b-se8kj9cw7o] {
    padding: 22px;
    border: 1px solid var(--panel-border);
    border-radius: 15px;
    background: linear-gradient( 145deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018) );
}

.tempo-value[b-se8kj9cw7o] {
    color: var(--accent-bright);
    font-size: clamp(1.75rem, 4vw, 2.45rem);
    font-weight: 850;
    letter-spacing: -0.045em;
}

    .tempo-value span[b-se8kj9cw7o] {
        margin-left: 3px;
        color: var(--text-secondary);
        font-size: 0.76rem;
        font-weight: 750;
        letter-spacing: 0.08em;
    }

.tempo-slider[b-se8kj9cw7o],
.track-volume-slider[b-se8kj9cw7o] {
    width: 100%;
    accent-color: var(--accent);
    cursor: pointer;
}

.tempo-slider[b-se8kj9cw7o] {
    height: 28px;
}

.tempo-scale[b-se8kj9cw7o] {
    display: flex;
    justify-content: space-between;
    margin-top: -2px;
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 650;
}

.tempo-actions[b-se8kj9cw7o],
.key-actions[b-se8kj9cw7o] {
    margin-top: 16px;
}

.outline-action-button[b-se8kj9cw7o] {
    padding: 9px 15px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 9px;
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.035);
    font-size: 0.85rem;
    font-weight: 700;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

    .outline-action-button:hover:not(:disabled)[b-se8kj9cw7o] {
        border-color: rgba(34, 211, 107, 0.55);
        background: rgba(34, 211, 107, 0.09);
        transform: translateY(-1px);
    }

    .outline-action-button:disabled[b-se8kj9cw7o] {
        color: #585858;
        border-color: #303030;
        background: #1a1a1a;
        cursor: not-allowed;
    }

.key-panel[b-se8kj9cw7o] {
    max-width: 720px;
    margin: 0 auto;
}

.key-shift-card[b-se8kj9cw7o] {
    display: grid;
    grid-template-columns: auto minmax(190px, 1fr) auto;
    align-items: center;
    gap: 18px;
    padding: clamp(20px, 5vw, 34px);
    border: 1px solid rgba(34, 211, 107, 0.2);
    border-radius: 18px;
    background: radial-gradient( circle at center, rgba(34, 211, 107, 0.1), transparent 70% ), #151515;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 18px 44px rgba(0, 0, 0, 0.28);
}

.key-shift-button[b-se8kj9cw7o] {
    width: 58px;
    height: 58px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    color: var(--text-primary);
    background: linear-gradient( 145deg, #2a2a2a, #171717 );
    font-size: 2rem;
    font-weight: 400;
    line-height: 1;
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

    .key-shift-button:hover:not(:disabled)[b-se8kj9cw7o] {
        transform: scale(1.06);
        border-color: rgba(34, 211, 107, 0.58);
        background: #242f28;
    }

    .key-shift-button:disabled[b-se8kj9cw7o] {
        opacity: 0.28;
        cursor: not-allowed;
    }

.key-shift-display[b-se8kj9cw7o] {
    text-align: center;
}

.key-shift-value[b-se8kj9cw7o] {
    margin-top: 5px;
    color: var(--accent-bright);
    font-size: clamp(1.65rem, 5vw, 2.7rem);
    font-weight: 850;
    line-height: 1.1;
    letter-spacing: -0.04em;
}

.key-shift-range[b-se8kj9cw7o] {
    margin-top: 8px;
    color: var(--text-muted);
    font-size: 0.75rem;
}

.information-card[b-se8kj9cw7o] {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 16px;
    margin-top: 22px;
    border: 1px solid var(--panel-border);
    border-radius: 12px;
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.025);
}

.information-icon[b-se8kj9cw7o] {
    min-width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #06180e;
    background: var(--accent);
    font-weight: 800;
}

.information-card strong[b-se8kj9cw7o] {
    color: var(--text-primary);
}

.information-card p[b-se8kj9cw7o] {
    margin: 3px 0 0;
    font-size: 0.86rem;
    line-height: 1.45;
}

.chord-pill:focus-visible[b-se8kj9cw7o] {
    outline: 2px solid var(--accent-bright);
    outline-offset: 3px;
}

.info-file-actions[b-se8kj9cw7o] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: -4px 0 28px;
}

.info-file-button[b-se8kj9cw7o] {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 16px;
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    color: var(--text-primary);
    background: linear-gradient(180deg, #242a26, #151916);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 5px 14px rgba(0,0,0,.22);
    text-decoration: none;
    font-size: .86rem;
    font-weight: 750;
    transition: filter .15s ease, transform .15s ease, border-color .15s ease;
}

.info-file-button:hover[b-se8kj9cw7o] {
    color: white;
    border-color: rgba(124,255,56,.5);
    filter: brightness(1.1);
    transform: translateY(-1px);
}

.info-download-button[b-se8kj9cw7o] {
    border-color: rgba(34,211,107,.5);
    color: #06180e;
    background: linear-gradient(135deg, var(--accent-bright), var(--accent));
}

.track-mixer[b-se8kj9cw7o] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.track-strip[b-se8kj9cw7o] {
    display: grid;
    grid-template-columns: minmax(190px, 0.8fr) minmax(280px, 1.4fr);
    align-items: center;
    gap: 22px;
    padding: 16px 18px;
    border: 1px solid var(--panel-border);
    border-radius: 14px;
    background: linear-gradient( 145deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018) );
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

    .track-strip:hover[b-se8kj9cw7o] {
        transform: translateY(-1px);
        border-color: rgba(255, 255, 255, 0.16);
        background: linear-gradient( 145deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.025) );
    }

.track-identity[b-se8kj9cw7o] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.track-number[b-se8kj9cw7o] {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(34, 211, 107, 0.22);
    border-radius: 10px;
    color: var(--accent-bright);
    background: rgba(34, 211, 107, 0.07);
    font-size: 0.82rem;
    font-weight: 850;
}

.track-heading[b-se8kj9cw7o] {
    min-width: 0;
}

.track-instrument-meta[b-se8kj9cw7o] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 3px;
    color: var(--text-muted);
    font-size: 0.72rem;
}

.track-instrument-meta label[b-se8kj9cw7o] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    max-width: 100%;
}

.track-instrument-meta select:disabled[b-se8kj9cw7o] {
    opacity: 0.55;
    cursor: not-allowed;
}

.track-instrument-meta select[b-se8kj9cw7o] {
    max-width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--border-color, #465047);
    border-radius: 5px;
    background: #18201c;
    color: var(--text-primary);
    font: inherit;
}

    .track-heading strong[b-se8kj9cw7o] {
        display: block;
        color: var(--text-primary);
        font-size: 0.96rem;
        overflow-wrap: anywhere;
    }

    .track-heading span[b-se8kj9cw7o] {
        display: block;
        margin-top: 2px;
        color: var(--text-muted);
        font-size: 0.72rem;
        overflow-wrap: anywhere;
    }

.track-controls[b-se8kj9cw7o] {
    display: grid;
    grid-template-columns: minmax(170px, 1fr) auto;
    align-items: center;
    gap: 18px;
}

.control-label-row[b-se8kj9cw7o] {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 4px;
    color: var(--text-muted);
    font-size: 0.71rem;
    font-weight: 650;
}

.volume-value[b-se8kj9cw7o] {
    color: var(--text-secondary);
}

.track-switches[b-se8kj9cw7o] {
    display: flex;
    align-items: center;
    gap: 7px;
}

.track-toggle[b-se8kj9cw7o] {
    position: relative;
    min-width: 64px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 11px;
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.03);
    font-size: 0.76rem;
    font-weight: 750;
    cursor: pointer;
    transition: color 0.16s ease, border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}

    .track-toggle:hover[b-se8kj9cw7o] {
        transform: translateY(-1px);
        color: var(--text-primary);
        border-color: rgba(255, 255, 255, 0.2);
    }

    .track-toggle input[b-se8kj9cw7o] {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

    .track-toggle.mute-selected[b-se8kj9cw7o] {
        color: #2a080b;
        border-color: var(--danger);
        background: var(--danger);
    }

    .track-toggle.solo-selected[b-se8kj9cw7o] {
        color: #241800;
        border-color: var(--warning);
        background: var(--warning);
    }

.empty-state[b-se8kj9cw7o] {
    padding: 50px 20px;
    text-align: center;
}

.empty-state-icon[b-se8kj9cw7o] {
    width: 64px;
    height: 64px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    border: 1px solid rgba(34, 211, 107, 0.22);
    border-radius: 50%;
    color: var(--accent);
    background: rgba(34, 211, 107, 0.07);
    font-size: 1.65rem;
}

.empty-state h2[b-se8kj9cw7o] {
    margin-bottom: 5px;
}

.empty-state p[b-se8kj9cw7o] {
    margin: 0;
    color: var(--text-muted);
}

.player-footer[b-se8kj9cw7o] {
    width: min(1100px, 100%);
    display: flex;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin: 26px auto 0;
    padding: 18px 4px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    color: #646464;
    font-size: 0.72rem;
}

@media (max-width: 820px) {
    .track-strip[b-se8kj9cw7o] {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .track-controls[b-se8kj9cw7o] {
        grid-template-columns: minmax(150px, 1fr) auto;
    }
}

@media (max-width: 600px) {
    .midi-player-page[b-se8kj9cw7o] {
        width: 100%;
        margin: 0;
        padding: 18px 10px 30px;
    }

    .player-header[b-se8kj9cw7o] {
        margin-bottom: 18px;
    }

    .player-tabs[b-se8kj9cw7o] {
        gap: 4px;
        padding: 5px;
    }

        .player-tabs .nav-link[b-se8kj9cw7o] {
            gap: 4px;
            padding: 10px 7px;
            font-size: 0.82rem;
        }

    .player-panel[b-se8kj9cw7o] {
        padding: 16px;
        border-radius: 15px;
    }

    .midi-device-row[b-se8kj9cw7o] {
        grid-template-columns: 1fr;
    }

    .transport-section[b-se8kj9cw7o] {
        display: block;
    }

    .transport-buttons[b-se8kj9cw7o] {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }

    .transport-button[b-se8kj9cw7o] {
        min-width: 0;
        padding: 11px 7px;
        border-radius: 10px;
        font-size: 0.79rem;
    }

    .transport-icon[b-se8kj9cw7o] {
        display: none;
    }

    .bar-display[b-se8kj9cw7o] {
        min-width: 0;
        margin-top: 14px;
    }

    .chord-grid[b-se8kj9cw7o] {
        grid-template-columns: repeat( 2, minmax(0, 1fr) );
    }

    .chord-pill[b-se8kj9cw7o] {
        min-width: 0;
    }

    .key-shift-card[b-se8kj9cw7o] {
        grid-template-columns: auto 1fr auto;
        gap: 10px;
        padding: 20px 12px;
    }

    .key-shift-button[b-se8kj9cw7o] {
        width: 48px;
        height: 48px;
    }

    .track-controls[b-se8kj9cw7o] {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .track-switches[b-se8kj9cw7o] {
        justify-content: flex-start;
    }

    .track-toggle[b-se8kj9cw7o] {
        flex: 1;
    }

    .player-footer[b-se8kj9cw7o] {
        display: block;
        text-align: center;
        line-height: 1.6;
    }
}

@media (max-width: 370px) {
    .chord-grid[b-se8kj9cw7o] {
        grid-template-columns: 1fr;
    }

    .player-tabs .tab-icon[b-se8kj9cw7o] {
        display: none;
    }

    .key-shift-card[b-se8kj9cw7o] {
        grid-template-columns: 1fr 1fr;
    }

    .key-shift-display[b-se8kj9cw7o] {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .key-shift-button[b-se8kj9cw7o] {
        width: 100%;
        border-radius: 10px;
    }
}