/* =========================================================
        ----------------------------GLOBAL--------------------------
        ============================================================ */
        * {
            box-sizing: border-box;
        }

        :root {
            --standard-button-size: 55px;
        }

        html, body {
            height: 100%;
        }

        body {
            margin: 0;
            background: gainsboro;
            color:floralwhite;
            font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }

        button {
            font-family: inherit;
        }

        /* =========================================================
        --------------------------MAIN DEVICE-----------------------
        ============================================================ */
        .device {
            width: min(1800px, 96vw);
            flex: 1 1 auto;
            min-height: 0;
            margin: 20px auto 0;
            padding: 5px 25px;
            background: royalblue;
            border: 2px solid crimson;
            border-radius: 8px;

            display: flex;
            flex-direction: column;
            gap: 8px;
            overflow-y: auto;
            overflow-x: hidden;

            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05);
        }

        /* =========================================================
        ----------------------------HEADER--------------------------
        ============================================================ */
        .header {
            display: grid;
            grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 1fr);
            align-items: center;
            gap: 20px;
            padding-bottom: 14px;
            border-bottom: 3px solid crimson;
            margin-bottom: 0;
            flex: 0 0 auto;
        }

        .logo {
            margin: 0;
            grid-column: 1;
            font-size: 58px;
            font-weight: bold;
            letter-spacing: 2px;
            font-style: italic;
        }

        .logo .logo-accent {
            color: crimson;
        }

        .header-right {
            grid-column: 2 / 4;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 16px;
        }

        #upgradeButton {
            padding: 8px 16px;
            background: goldenrod;
            color: cornsilk;
            border: none;
            border-radius: 4px;
            font-weight: bold;
            font-size: 13px;
            cursor: pointer;
            letter-spacing: 0.06em;
        }

        #upgradeButton:hover {
            background: #d4a017;
        }

        #upgradeButton:disabled {
            opacity: 0.6;
            cursor: not-allowed;
        }

        .model {
            color: gainsboro;
            font-size: 14px;
        }

        /* Modal Overlay Background */
        .modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, 0.6);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 1000;
        }

        .modal-overlay.hidden {
        display: none;
        }

        /* Modal Content Card */
        .modal-card {
        background: #1b1b1b;
        color: floralwhite;
        padding: 2rem;
        border-radius: 8px;
        border: 2px solid crimson;
        width: 100%;
        max-width: 400px;
        position: relative;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
        }

        .modal-card h2 {
        color: goldenrod;
        letter-spacing: 0.04em;
        margin-top: 0;
        }

        .modal-card label {
        font-size: 12px;
        font-weight: bold;
        color: gainsboro;
        }

        .close-btn {
        position: absolute;
        top: 12px;
        right: 16px;
        background: none;
        border: none;
        color: floralwhite;
        font-size: 1.5rem;
        cursor: pointer;
        }

        .close-btn:hover {
        color: crimson;
        }

        #auth-form {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        margin-top: 1rem;
        }

        #auth-form input {
        padding: 0.75rem;
        color: #fff;
        background: #292929;
        border: 1px solid #555;
        border-radius: 4px;
        }

        #auth-form button {
        padding: 0.75rem;
        background-color: goldenrod;
        color: cornsilk;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-weight: bold;
        letter-spacing: 0.06em;
        }

        #auth-form button:hover {
        background-color: #d4a017;
        }

        .error-msg {
        color: #ff6b6b;
        font-size: 0.875rem;
        margin-top: 0.5rem;
        }

        .toggle-text {
        margin-top: 1rem;
        text-align: center;
        font-size: 0.875rem;
        color: gainsboro;
        }

        .toggle-text a {
        color: goldenrod;
        }

        /* About / Instruction Manual */
        #aboutButton {
            padding: 8px 16px;
            background: azure;
            color: royalblue;
            border: none;
            border-radius: 4px;
            font-weight: bold;
            font-size: 13px;
            cursor: pointer;
            letter-spacing: 0.06em;
            display: inline-block;
            text-decoration: none;
        }

        #aboutButton:hover {
            background: rgb(229, 250, 255);
        }


        /* =========================================================
        ----------------UPPER CONTROL / DISPLAY PANEL---------------
        ============================================================ */
        .upper-panel {
            display: grid;
            grid-template-columns: 568px minmax(0, 1fr) 76px;
            grid-template-rows: auto auto auto auto auto;
            grid-template-areas:
                "grid display display"
                "grid transport ."
                "grid controls controls"
                "grid . ."
                "banks . .";
            gap: 8px 20px;
            width: 100%;
            margin-bottom: 0;
            flex: 0 0 auto;
        }

        /* =========================================================
        ---------------------------TRANSPORT------------------------
        ============================================================ */
        .transport {
            display: flex;
            align-items: center;
            gap: 19px;
            width: max-content;
            box-sizing: border-box;
            border-top: 1px solid #444;
            border-bottom: 1px solid #444;
            padding: 20px 0;
            grid-area: transport;
        }

        .transport button {
            flex: 0 0 var(--standard-button-size);
            width: var(--standard-button-size);
            height: var(--standard-button-size);
            padding: 8px 8px 8px 8px;
            background: azure;
            color: black;
            border-radius: 4px;
            cursor: pointer;
            font-weight: bold;
            border: 3px solid gainsboro;
            box-shadow: 0 7px 0 0 lightgrey;
            transition: background 0.08s, transform 0.05s, box-shadow 0.1s ease;
        }

        .transport button:hover {
            background: rgb(229, 250, 255);
        }

        .transport button.locked {
            opacity: 0.4;
            cursor: not-allowed;
            background: gainsboro;
        }

        .transport button.locked:hover {
            background: gainsboro;
        }

        .stop-all {
            background: crimson !important;
            color: cornsilk !important;
        }

        .stop-all:active {
            transform: scale(0.97);
            background: azure !important;
            color: lightcoral !important;
            box-shadow: 0 0 7px 5px lightcoral;
            transform: translateY(4px);
        }

        #pauseButton:active {
            transform: scale(0.97);
            background: gold; 
            color: cornsilk;
            border-color: cornsilk;
            box-shadow: 0 0px 7px 5px rgba(255, 217, 0, 0.516);
            transform: translateY(4px);
        } 

        #stopButton:active {
            transform: scale(0.97);
            background: red; 
            color: cornsilk;
            border-color: cornsilk;
            box-shadow: 0 0 7px 5px lightcoral;
            transform: translateY(4px);
        }

        #playButton:active {
            transform: scale(0.97);
            background: lime; 
            color: cornsilk; 
            border-color: cornsilk;
            box-shadow: 0 0 7px 5px greenyellow;
            transform: translateY(4px);
        }

        #rewindButton:active{
            transform: scale(0.97);
            background: lightblue;
            color: cornsilk;
            border-color: cornsilk;
            box-shadow: 0 0 7px 5px lightskyblue;
            transform: translateY(4px);
        }

        #fastForwardButton:active{
            transform: scale(0.97);
            background: lightblue;
            color: cornsilk;
            border-color: cornsilk;
            box-shadow: 0 0 7px 5px lightskyblue;
            transform: translateY(4px);
        }

        #loopButton.active {
            transform: scale(0.97);
            background: gold; 
            color: cornsilk;
            border-color: cornsilk;
            box-shadow: 0 0 8px 2px gold;
            transform: translateY(4px);
        }

        #editButton.active {
            transform: scale(0.97);
            background: gold; 
            color: cornsilk;
            border-color: cornsilk;
            box-shadow: 0 0px 7px 5px rgba(255, 217, 0, 0.516);
            transform: translateY(4px);
        }

        .transport-target-section {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-top: 0; 
            width: fit-content;
            max-width: 100%;
            align-self: start;            
        }

        .transport-target-button {
            padding: 8px 14px;
            background: #292929;
            color: gainsboro;
            border: 1px solid #555;
            border-radius: 4px;
            cursor: pointer;
            font-size: 12px;
            font-weight: bold;
        }

        .transport-target-button:hover {
            background: #3a3a3a;
        }

        .transport-target-button:active {
            background: goldenrod; 
            color: cornsilk;
            border-color: cornsilk;
            box-shadow: 0 0 5px rgba(255, 248, 220, 0.7);
        }

        #transportTargetStatus {
            padding: 8px 14px;
            background: #292929;
            color: gainsboro;
            border: 1px solid #555;
            border-radius: 4px;
            cursor: pointer;
            font-size: 12px;
            font-weight: bold;
        }

        /* =========================================================
        ----------------------------VOLUME--------------------------
        ============================================================ */
        .volume {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: start;
            gap: 12px;
            width: 180px;
            box-sizing: border-box;
        }

        .volume label {
            font-size: 12px;
            font-weight: bold;
            color: gainsboro;
        }

        .volume input[type="range"] {
            -webkit-appearance: none;
            appearance: none;
            width: 100%;
            height: 28px;
            margin: 0;
            padding: 0;
            background: transparent;
            cursor: pointer;
        }

        /* Chrome / Edge / Safari track */
        .volume input[type="range"]::-webkit-slider-runnable-track {
            width: 100%;
            height: 8px;
            background: #111;
            border: 2px solid #555;
            border-radius: 4px;
            box-shadow: inset 0 0 5px rgba(0,0,0,0.9), 0 1px 2px rgba(255,255,255,0.15);
        }

        /* Chrome / Edge / Safari fader knob */
        .volume input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 28px;
            height: 48px;
            margin-top: -22px;
            background: linear-gradient(to right,#e6e6e6 0%,#bdbdbd 45%,#888 50%, #cfcfcf 100%);
            border: 2px solid #333;
            border-radius: 3px;
            box-shadow: 0 3px 4px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.8);
            cursor: grab;
        }

        .volume input[type="range"]::-webkit-slider-thumb:active {
            cursor: grabbing;
        }

        /* Firefox track */
        .volume input[type="range"]::-moz-range-track {
            width: 100%;
            height: 8px;
            background: #111;
            border: 2px solid #555;
            border-radius: 4px;
            box-shadow: inset 0 0 5px rgba(0,0,0,0.9), 0 1px 2px rgba(255,255,255,0.15);
        }

        /* Firefox fader knob */
        .volume input[type="range"]::-moz-range-thumb {
            width: 28px;
            height: 48px;
            background: linear-gradient(to right, #e6e6e6 0%,#bdbdbd 45%,#888 50%,#cfcfcf 100%);
            border: 2px solid #333;
            border-radius: 3px;
            box-shadow: 0 3px 4px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.8);
            cursor: grab;
        }

        /* =========================================================
        -----------------------MOUSE ACTIONS------------------------
        ============================================================ */
        .mouse-actions {
            display: flex;
            align-items: center;
            flex-wrap: nowrap;
            flex: 0 0 310px;
            gap: 8px;
            width: 310px;
            max-width: 100%;
            box-sizing: border-box;
            margin: 0;
            padding: 7px 8px;
            background: #1b1b1b;
            border: 1px solid #444;
            border-radius: 5px;
            align-self: start;
            min-width: 0;
        }

        .target-and-mouse-actions {
            display: flex;
            align-items: flex-start;
            gap: 24px;
            width: 100%;
            min-width: 0;
            grid-area: controls;
        }

        .mouse-action {
            display: flex;
            align-items: center;
            gap: 4px;
            min-width: 0;
        }

        .mouse-action label {
            font-size: 9px;
            font-weight: bold;
            color: gainsboro;
            white-space: nowrap;
        }

        .mouse-action select {
            background: #292929;
            color: #fff;
            border: 1px solid #555;
            border-radius: 4px;
            padding: 3px 5px;
            cursor: pointer;
            font-size: 9px;
            font-weight: bold;
        }

        .display-with-master {
            display: grid;
            grid-template-columns: minmax(0, 510px) minmax(76px, 1fr);
            gap: 12px;
            width: 100%;
            min-width: 0;
            grid-area: display;
            align-self: end;
        }

        .master-fader {
            position: relative;
            display: flex;
            align-items: stretch;
            justify-content: center;
            grid-row: 1;
            grid-column: 2;
            min-width: 0;
        }

        .master-fader .volume {
            position: absolute;
            inset: 0;
            width: auto;
            gap: 8px;
            padding: 8px 0;
        }

        .master-fader-control {
            position: relative;
            display: flex;
            flex: 1;
            align-items: stretch;
            justify-content: center;
            gap: 6px;
            width: 72px;
            min-height: 0;
        }

        .master-fader-control::before {
            position: absolute;
            top: 14px;
            right: 8px;
            bottom: 14px;
            z-index: 0;
            width: 16px;
            background: linear-gradient(
                to bottom,
                crimson 0 1px,
                transparent 1px calc(25% - 0.5px),
                crimson calc(25% - 0.5px) calc(25% + 0.5px),
                transparent calc(25% + 0.5px) calc(50% - 0.5px),
                crimson calc(50% - 0.5px) calc(50% + 0.5px),
                transparent calc(50% + 0.5px) calc(75% - 0.5px),
                crimson calc(75% - 0.5px) calc(75% + 0.5px),
                transparent calc(75% + 0.5px) calc(100% - 1px),
                crimson calc(100% - 1px) 100%
            );
            content: "";
            pointer-events: none;
        }

        .master-scale {
            position: absolute;
            inset: 14px 38px 14px 0;
            z-index: 2;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            color: gainsboro;
            font-family: "Courier New", monospace;
            font-size: 10px;
            line-height: 1;
            white-space: nowrap;
            pointer-events: none;
        }

        .master-scale span {
            padding-right: 10px;
        }

        .master-fader .volume input[type="range"] {
            position: relative;
            z-index: 1;
            writing-mode: vertical-lr;
            direction: rtl;
            flex: 0 0 32px;
            width: 32px;
            height: 100%;
            margin-left: 40px;
            min-height: 0;
        }

        .master-fader .volume input[type="range"]::-webkit-slider-runnable-track {
            width: 8px;
            height: 100%;
            background: transparent;
        }

        .master-fader .volume input[type="range"]::-webkit-slider-thumb {
            width: 48px;
            height: 28px;
            margin-top: 0;
            margin-left: -20px;
        }

        .master-fader .volume input[type="range"]::-moz-range-track {
            width: 8px;
            height: 100%;
            background: transparent;
        }

        .master-fader .volume input[type="range"]::-moz-range-thumb {
            width: 48px;
            height: 28px;
        }

        /* =========================================================
        --------------------------DISPLAY---------------------------
        ============================================================ */
        .display {
            position: relative; 
            grid-row: 1;
            grid-column: 1;
            background: #07100a;
            border: 3px solid #030604;
            border-radius: 4px;
            width: 100%;
            max-width: 510px;
            height: 300px;
            box-sizing: border-box;
            padding: 20px;
            margin-top: 8px;
            margin-bottom: 15px;
            font-family: "Courier New", monospace;
            color: springgreen;
            box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.8);
            justify-self: start;
            overflow: hidden;
        }

        .display-top {
            display: flex;
            justify-content: space-between;
            font-size: 14px;
        }

        .display-main {
            margin-top: 8px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 26px;
        }

        .display-status {
            font-size: 13px;
        }

        .sound-edit-panel,
        .upload-panel,
        .library-panel {
            position: absolute;
            top: 82px;
            right: 12px;
            bottom: 12px;
            left: 12px;
            z-index: 2;
            min-height: 0;
            overflow-y: auto;
        }

        .sound-edit-panel {
            color: #f4f4f4;
            background: #111a13;
            border: 1px solid #555;
            border-radius: 4px;
            padding: 14px;
            height: auto;
            box-sizing: border-box;
            display: grid;
            gap: 6px;
        }

        .sound-edit-panel[hidden] {
            display: none;
        }

        .display-tabs {
            position: absolute;
            left: 20px;
            bottom: 16px;
            display: flex;
            gap: 8px;
            z-index: 1;
        }

        .display-tabs[hidden] {
            display: none;
        }

        .display-tab {
            padding: 8px 12px;
            background: #111a13;
            color: springgreen;
            border: 1px solid #555;
            border-radius: 4px;
            font-size: 11px;
            font-weight: bold;
            letter-spacing: 0.08em;
            cursor: pointer;
        }

        .display-tab:hover {
            background: #1c2a1f;
        }

        .display-tab.locked {
            opacity: 0.4;
            cursor: not-allowed;
        }

        .upload-panel {
            color: #f4f4f4;
            background: #111a13;
            border: 1px solid #555;
            border-radius: 4px;
            padding: 8px;
            height: auto;
            box-sizing: border-box;
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            align-content: start;
            gap: 6px;
        }

        .upload-panel[hidden] {
            display: none;
        }

        .upload-panel label {
            display: block;
            font-size: 12px;
        }

        .upload-panel input,
        .upload-panel select {
            width: 100%;
            box-sizing: border-box;
            margin-top: 4px;
            padding: 6px;
            color: #fff;
            background: #292929;
            border: 1px solid #555;
        }

        .upload-panel .sound-edit-header,
        .upload-panel .sound-edit-actions {
            grid-column: 1 / -1;
        }

        .library-panel {
            color: #f4f4f4;
            background: #111a13;
            border: 1px solid #555;
            border-radius: 4px;
            padding: 10px;
            height: auto;
            box-sizing: border-box;
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            grid-template-rows: auto auto minmax(0, 1fr);
            align-content: start;
            gap: 8px;
        }

        .library-panel .sound-edit-header,
        .library-panel > label {
            grid-column: 1 / -1;
        }

        .library-panel .sound-edit-actions {
            grid-column: 2;
            grid-row: 3;
            align-self: end;
            flex-direction: column;
            gap: 8px;
        }

        .library-drop-hint {
            color: springgreen;
            font-size: 11px;
            letter-spacing: 0.06em;
            white-space: nowrap;
        }

        .library-panel[hidden] {
            display: none;
        }

        .library-panel label {
            display: block;
            font-size: 12px;
        }

        .library-panel input {
            width: 100%;
            box-sizing: border-box;
            margin-top: 4px;
            padding: 6px;
            color: #fff;
            background: #292929;
            border: 1px solid #555;
        }

        .library-list {
            grid-column: 1;
            grid-row: 3;
            display: flex;
            flex-direction: column;
            gap: 6px;
            min-height: 0;
            overflow-y: auto;
            padding-right: 4px;
        }

        .library-empty {
            color: #9fb8a8;
            font-size: 12px;
            font-style: italic;
        }

        .library-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 8px 10px;
            background: #1c2a1f;
            border: 1px solid #444;
            border-radius: 4px;
            font-size: 12px;
            cursor: pointer;
        }

        .library-item-name {
            color: #f4f4f4;
            font-weight: bold;
        }

        .library-item[draggable="true"] {
            cursor: grab;
        }

        .library-item[draggable="true"]:active {
            cursor: grabbing;
        }

        .sound-button.drag-over {
            box-shadow: 0 0 0 3px gold, 0 7px 0 0 lightgrey;
        }

        .sound-edit-header,
        .sound-edit-actions {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
        }

        .sound-edit-kicker {
            color: springgreen;
            font-size: 18px;
            letter-spacing: 0.14em;
            margin: 0px; 
        }

        .sound-edit-subtitle {
            margin: 2px 0 0;
            font-size: 11px;
            color: #9fb8a8;
            letter-spacing: 0.08em;
        }

        .dialog-close {
            display: grid;
            place-items: center;
            flex: 0 0 34px;
            width: 34px;
            height: 34px;
            padding: 0;
            color: springgreen;
            background: rgba(7, 16, 10, 0.7);
            border: 1px solid #667;
            border-radius: 50%;
            font-size: 0;
            cursor: pointer;
            transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
        }

        .dialog-close::before {
            content: "\00D7";
            font-family: Arial, sans-serif;
            font-size: 24px;
            line-height: 1;
        }

        .dialog-close:hover {
            color: #fff;
            background: rgb(49, 152, 101);
            border-color: springgreen;
            transform: rotate(90deg);
        }

        .dialog-close:focus-visible {
            outline: 2px solid springgreen;
            outline-offset: 2px;
        }

        .sound-edit-form input[type="text"] {
            width: 100%;
            box-sizing: border-box;
            margin-top: 6px;
            padding: 10px;
            color: #fff;
            background: #292929;
            border: 1px solid #555;
        }

        .waveform-section {
            padding: 10px;
            background: #0d0d0d;
            border: 1px solid #3d3d3d;
            border-radius: 4px;
        }

        #waveformCanvas {
            display: block;
            width: 100%;
            height: 48px;
            color: #00ff7f;
        }

        .loop-point-controls {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 10%;
        }

        .loop-point-controls label {
            display: block;
            font-size: 12px; 
        }

        .loop-point-controls output {
            color: springgreen;
            font-variant-numeric: tabular-nums;
        }

        .loop-point-controls input[type="range"] {
            width: 100%;
            accent-color: springgreen;
        }

        .loop-point-note {
            margin: -6px 0 0;
            color: #aaa;
            font-size: 12px;
        }

        .sound-edit-actions {
            justify-content: flex-end;
        }

        .sound-edit-actions button {
            padding: 9px 14px;
            color: #fff;
            background: #292929;
            border: 1px solid #667;
            border-radius: 3px;
            cursor: pointer;
            font-size: 12px;
        }

        #saveSoundEdits {
            background: rgb(49, 152, 101);
            border-color: springgreen;
        }

        /* =========================================================
        ---------------------SOUND BUTTON GRID----------------------
        ============================================================ */
        .sound-grid {
            display: grid;
            grid-template-columns: repeat(10, var(--standard-button-size));
            margin-top: 10px;
            margin-left: 25px;
            row-gap: 30px;            /* room for the etched labels */
            column-gap: 2px;
            padding-bottom: 20px;     /* room for the last row's labels */
            width: 100%;
            max-width: 680px;
            min-width: 0;
            grid-area: grid;
            align-self: stretch;
            justify-self: stretch;
        }

        .sound-button {
            position: relative;
            box-sizing: border-box;
            border: 3px solid lightgrey;
            border-radius: 10px;
            width: var + 1(--standard-button-size);
            height: var(--standard-button-size);
            background: azure;
            color: royalblue;
            box-shadow: 0 7px 0 0 lightgrey;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            justify-content: start;
            align-items: center;
            padding: 6px;
            transition: background 0.08s, transform 0.05s, box-shadow 0.1s ease;
        }

        .sound-button:hover {
            background: rgb(229, 250, 255);
        }

        .sound-button:active,
        .sound-button.pressed {
            transform: scale(0.97);
            background: #49ff71;
            box-shadow: 0px 0px 3px 5px #a3ffb7;
            transform: translateY(4px);
        }

        .sound-button.transport-target {
            border-color: goldenrod;
            box-shadow: 0 0 0 3px cornsilk, 0 7px 0 0 light grey; 
        }

        .sound-button.locked {
            opacity: 0.4;
            cursor: not-allowed;
            background: gainsboro;
            color: #777;
        }

        .sound-button.locked:hover {
            background: gainsboro;
        }

        .sound-number {
            align-self: flex-start;
            font-size: 7px;
            color: crimson;
            margin-bottom: 3px;
        }

        /* Shortcut label "etched" into the blue body, below each button */
        .sound-key {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            margin-top: 10px;          /* clears the button's 7px 3D edge */
            font-size: 11px;
            font-weight: bold;
            line-height: 12px;
            letter-spacing: 0.05em;
            text-align: center;
            color: rgba(0, 0, 40, 0.55);                 /* recessed */
            text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35); /* light lower edge = engraved look */
            pointer-events: none;
            user-select: none;
        }

        /* The button sinks 4px when pressed; keep the etched label fixed */
        .sound-button:active .sound-key,
        .sound-button.pressed .sound-key {
            transform: translateY(-4px);
        }

        .sound-label {
            display: block;
            width: 100%;
            min-width: 0;
            overflow: hidden;
            font-size: 10px;
            font-weight: bold;
            text-align: center;
            white-space: nowrap;
            text-overflow: clip;
        }
        
        .sound-state {
            position: absolute;
            right: 4px;
            bottom: 5px;
            left: 4px;
            font-size: 8px;
            color: crimson;
            line-height: 9px;
            text-align: center;
            white-space: nowrap;
            overflow: hidden;
            pointer-events: none;
        }

        .sound-label.scrolling {
            animation: sound-label-scroll var(--label-scroll-duration, 5s) ease-in-out infinite alternate;
        }

        @keyframes sound-label-scroll {
            from {
                text-indent: 0;
            }
            to {
                text-indent: calc(-1 * var(--label-scroll-distance));
            }
        }

        @media (prefers-reduced-motion: reduce) {
            .sound-label.scrolling {
                animation: none;
                text-overflow: ellipsis;
            }
        }

        .arrange-mode-button {
            min-width: 140px;
        }

        .arrange-menu {
            position: absolute;
            z-index: 2000;
            display: flex;
            flex-direction: column;
            background: #1b1b1b;
            border: 1px solid #555;
            border-radius: 4px;
            overflow: hidden;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
        }

        .arrange-menu button {
            padding: 10px 20px;
            background: #292929;
            color: #fff;
            border: none;
            border-bottom: 1px solid #444;
            cursor: pointer;
            font-weight: bold;
            font-size: 12px;
            text-align: left;
        }

        .arrange-menu button:last-child {
            border-bottom: none;
        }

        .arrange-menu button:hover {
            background: #3a3a3a;
        }

        /* =========================================================
        -------------------------BANK SELECTOR----------------------
        ============================================================ */
        .bank-section {
            display: flex;
            align-items: center;
            gap: 30px;
            margin-bottom: 0px;
            flex: 0 0 auto;
            grid-column: 1 / -1;
            grid-row: 5;
            flex-wrap: nowrap;
            margin-top: 0px;
        }

        .bank-label {
            margin-right: 5px;
            font-weight: bold;
        }

        .bank-select-button {
            min-width: 120px;
            height: 32px;
            background: azure;
            color: royalblue;
            box-shadow: 0 7px 0 0 lightgrey;
            border: 3px solid gainsboro;
            border-radius: 7px;
            cursor: pointer;
            transition: background 0.08s, transform 0.05s, box-shadow 0.1s ease;
        }

        .bank-button:hover {
            background: rgb(229, 250, 255);
        }

        .bank-select-button.active {
            transform: scale(0.97);
            background: goldenrod;
            box-shadow: 0px 0px 3px 5px cornsilk;
            transform: translateY(4px);
            color: cornsilk; 
        }

        .bank-select-button {
            min-width: 120px;
        }

        .arrange-mode-button {
            min-width: 120px;
            height: 32px;
            background: azure;
            color: royalblue;
            box-shadow: 0 7px 0 0 lightgrey;
            border: 3px solid gainsboro;
            border-radius: 7px;
            cursor: pointer;
            transition: background 0.08s, transform 0.05s, box-shadow 0.1s ease;
        }

        .arrange-mode-button.active {
            transform: scale(0.97);
            background: goldenrod;
            box-shadow: 0px 0px 3px 5px cornsilk;
            transform: translateY(4px);
            color: cornsilk;
        }

        .session-select {
            height: 40px;
            min-width: 170px;
            max-width: 260px;
            padding: 4px 10px;
            background: black;
            font-family: "Courier New", monospace;
            color: springgreen;
            border: 3px ridge #555;
            border-radius: 2px;
            cursor: pointer;
            outline: 2px solid crimson;
            outline-offset: 3px;
        }

        .session-select:disabled {
            color: #777;
            background: #bcbcbc;
            border-color: #888;
            cursor: not-allowed;
            opacity: 0.55;
        }

        .session-button {
            min-width: 120px;
            height: 32px;
            background: azure;
            color: royalblue;
            box-shadow: 0 7px 0 0 lightgrey;
            border: 3px solid gainsboro;
            border-radius: 7px;
            cursor: pointer;
            transition: background 0.08s, transform 0.05s, box-shadow 0.1s ease;
            font-size: 12px;
            font-weight: bold;
        }

        .session-button:disabled {
            color: #777;
            background: gainsboro;
            border-color: #aaa;
            box-shadow: 0 7px 0 0 #aaa;
            cursor: not-allowed;
            opacity: 0.55;
        }

        .session-button:disabled:hover {
            background: gainsboro;
        }


        .footer {
            display: flex;
            justify-content: center;
            align-items: center;
            flex: 0 0 auto;
            padding: 0px 80px 0px;
        }

        .fullscreen-button {
            position: fixed;
            right: 16px;
            bottom: 16px;
            z-index: 20;
            display: grid;
            width: 44px;
            height: 44px;
            place-items: center;
            color: floralwhite;
            background: rgba(20, 20, 20, 0.88);
            border: 1px solid rgba(255, 255, 255, 0.4);
            border-radius: 8px;
            cursor: pointer;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
            transition: background 0.15s, border-color 0.15s, transform 0.15s;
        }

        .fullscreen-button:hover {
            background: #292929;
            border-color: springgreen;
            transform: translateY(-2px);
        }

        .fullscreen-button:focus-visible {
            outline: 2px solid springgreen;
            outline-offset: 3px;
        }

        .fullscreen-button svg {
            width: 22px;
            height: 22px;
            fill: none;
            stroke: currentColor;
            stroke-linecap: round;
            stroke-linejoin: round;
            stroke-width: 1.8;
        }

        #author {
            margin: 0;
            font-size: 13px;
            line-height: 1.5;
            text-align: center;
            color: #444;
        }

        #author a {
            color: royalblue;
        }

        #author a:hover {
            color: crimson;
        }

        .seo-copy {
            position: absolute;
            width: 1px;
            height: 1px;
            overflow: hidden;
            clip-path: inset(50%);
            white-space: nowrap;
        }

        @media (min-width: 1101px) {
            .upper-panel {
                grid-template-columns: 680px minmax(0, 1fr) 134px;
            }

            .sound-grid {
                column-gap: 8px;
            }

            .display-with-master {
                grid-template-columns: minmax(0, 600px) minmax(76px, 134px);
                gap: 16px;
                width: max-content;
                max-width: 100%;
                justify-self: start;
            }

            .display {
                width: 100%;
                max-width: 600px;
            }

            .bank-section {
                justify-self: center;
                width: max-content;
                margin-top: 24px;
            }
        }

        /* =========================================================
        -------------------------RESPONSIVE-------------------------
        ============================================================ */
        @media (max-width: 1100px) {

            .sound-grid {
                grid-template-columns: repeat(10, minmax(0, 1fr));
            }

            .sound-button {
                width: 100%;
                max-width: var(--standard-button-size);
                height: auto;
                min-width: 0;
                min-height: 0;
                aspect-ratio: 1 / 1;
                justify-self: center;
                padding: 2px;
            }

            .left-controls {
                width: 100%;
            }

            .upper-panel {
                grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(190px, 3fr);
            }

            .display {
                width: 100%;
                max-width: 510px;
                height: auto;
                aspect-ratio: 3/2;
                flex: 0 0 auto;
            }
        }

        @media (max-width: 900px) {

            .target-and-mouse-actions {
                flex-direction: column;
                gap: 8px;
            }

            .mouse-actions {
                flex: 0 0 auto;
                flex-direction: column;
                align-items: stretch;
                width: 100%;
                max-width: 310px;
            }

            .mouse-action {
                justify-content: space-between;
            }

            .transport {
                width: 100%;
                max-width: 510px;
                flex-wrap: wrap;
            }

            .display {
                width: 100%;
                max-width: 640px;
            }
        }

        @media (max-width: 500px) {

            .sound-grid {
                grid-template-columns: repeat(10, minmax(0, 1fr));
            }

            .display {
                width: 100%;
                max-width: 360px;
                height: auto;
                aspect-ratio: 1 / 1;
            }

            .upload-panel {
                grid-template-columns: minmax(0, 1fr);
            }

            .transport {
                flex-wrap: wrap;
            }

            .transport button {
                flex: 0 0 var(--standard-button-size);
            }

            .transport-target-section {
                width: 100%;
                flex-wrap: wrap;
            }

            .upper-panel {
                grid-template-columns: minmax(0, 1fr);
                grid-template-areas:
                    "grid"
                    "display"
                    "transport"
                    "controls"
                    "banks";
            }

            .target-and-mouse-actions {
                flex-wrap: nowrap;
                gap: 8px;
            }

            .mouse-actions {
                flex: 0 0 auto;
                width: 100%;
            }

            .mouse-action {
                flex-direction: column;
                align-items: flex-start;
            }

            .bank-section {
                flex-wrap: wrap;
            }

            .volume {
                margin-left: 0;
                width: 100%;
            }

            .mouse-actions {
                width: 100%;
            }
        }

        @media (max-width: 400px) {
            .sound-grid {
                grid-template-columns: repeat(10, 1fr);
                column-gap: 2px;
            }

            .sound-button {
                width: 100%;
                height: auto;
                aspect-ratio: 1 / 1;
            }
        }