#menuBtn {

            position: fixed;

            top: 20px;
            left: 20px;

            z-index: 20;

            width: auto;
            padding: 12px 18px;

            border: none;
            border-radius: 14px;

            background: rgba(20, 40, 80, 0.85);

            color: #d8ecff;

            font-size: 15px;

            cursor: pointer;

            backdrop-filter: blur(10px);

            border: 1px solid rgba(120, 180, 255, 0.25);

            box-shadow:
                0 0 18px rgba(0, 140, 255, 0.25);

            transition: 0.25s;
        }

        #menuBtn:hover {

            transform: translateY(-2px);

            background: rgba(40, 80, 140, 0.95);

            box-shadow:
                0 0 24px rgba(80, 180, 255, 0.45);
        }
        :root {
            --bg-color: #0b0f19;
            --panel-bg: rgba(20, 27, 45, 0.75);
            --border-color: rgba(0, 240, 255, 0.2);
            --accent-cyan: #00f0ff;
            --accent-magenta: #ff0055;
            --ball1-color: #00f0ff;
            --ball2-color: #ff0055;
            --cm-color: #ffcc00;
            --text-color: #e0e6ed;
            --text-dim: #8a99ad;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
            user-select: none;
        }

        body {
            background-color: var(--bg-color);
            color: var(--text-color);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-image: 
                radial-gradient(circle at 15% 50%, rgba(0, 240, 255, 0.05) 0%, transparent 25%),
                radial-gradient(circle at 85% 30%, rgba(ff, 0, 85, 0.05) 0%, transparent 25%);
            overflow-x: hidden;
        }

        /* App Container Layout */
        .app-container {
            display: flex;
            flex-direction: row;
            width: 95vw;
            height: 92vh;
            gap: 20px;
            max-width: 1600px;
        }

        /* Left Section: Simulation Canvas */
        .simulation-container {
            flex: 1 1 65%;
            display: flex;
            flex-direction: column;
            background: var(--panel-bg);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            backdrop-filter: blur(10px);
            box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5),
                        inset 0 0 15px rgba(0, 240, 255, 0.05);
            position: relative;
            overflow: hidden;
            min-height: 400px;
        }

        .canvas-header {
            padding: 12px 20px;
            background: rgba(0, 0, 0, 0.2);
            border-bottom: 1px solid var(--border-color);
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.9rem;
            color: var(--text-dim);
        }

        .ref-frame-badge {
            color: var(--accent-cyan);
            font-weight: bold;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        canvas {
            width: 100%;
            height: 100%;
            display: block;
        }

        /* Right Section: Control Panel & Data */
        .control-panel {
            flex: 1 1 35%;
            min-width: 340px;
            max-width: 500px;
            background: var(--panel-bg);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            backdrop-filter: blur(10px);
            box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5);
            padding: 24px;
            display: flex;
            flex-direction: column;
            gap: 20px;
            overflow-y: auto;
        }

        /* Scrollbar Styling */
        .control-panel::-webkit-scrollbar {
            width: 6px;
        }
        .control-panel::-webkit-scrollbar-track {
            background: rgba(0, 0, 0, 0.1);
        }
        .control-panel::-webkit-scrollbar-thumb {
            background: rgba(0, 240, 255, 0.3);
            border-radius: 3px;
        }
        .control-panel::-webkit-scrollbar-thumb:hover {
            background: rgba(0, 240, 255, 0.6);
        }

        /* Tech Typography & UI Elements */
        h1 {
            font-size: 1.5rem;
            font-weight: 700;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            background: linear-gradient(90deg, var(--accent-cyan), var(--accent-magenta));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            margin-bottom: 4px;
        }

        .subtitle {
            font-size: 0.8rem;
            color: var(--text-dim);
            margin-bottom: 10px;
            border-bottom: 1px solid var(--border-color);
            padding-bottom: 10px;
        }

        .section-title {
            font-size: 0.9rem;
            color: var(--accent-cyan);
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .section-title::before {
            content: '';
            display: inline-block;
            width: 4px;
            height: 12px;
            background: var(--accent-cyan);
            box-shadow: 0 0 8px var(--accent-cyan);
        }

        /* Data HUD */
        .data-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
        }

        .data-card {
            background: rgba(0, 0, 0, 0.3);
            border: 1px solid rgba(255, 255, 255, 0.05);
            border-radius: 8px;
            padding: 10px;
            position: relative;
        }

        .data-card.ball1 { border-left: 3px solid var(--ball1-color); }
        .data-card.ball2 { border-left: 3px solid var(--ball2-color); }
        .data-card.system { grid-column: span 2; border-left: 3px solid var(--cm-color); }

        .data-label {
            font-size: 0.75rem;
            color: var(--text-dim);
            margin-bottom: 4px;
        }

        .data-value {
            font-family: 'Courier New', Courier, monospace;
            font-size: 0.95rem;
            font-weight: bold;
        }

        /* Controls Form */
        .control-group {
            background: rgba(0, 0, 0, 0.2);
            border: 1px solid rgba(255, 255, 255, 0.05);
            border-radius: 8px;
            padding: 14px;
            margin-bottom: 12px;
        }

        .slider-item {
            margin-bottom: 12px;
        }
        .slider-item:last-child { margin-bottom: 0; }

        .slider-header {
            display: flex;
            justify-content: space-between;
            font-size: 0.85rem;
            margin-bottom: 6px;
        }

        input[type=range] {
            -webkit-appearance: none;
            width: 100%;
            background: rgba(255, 255, 255, 0.1);
            height: 4px;
            border-radius: 2px;
            outline: none;
        }

        input[type=range]::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 14px;
            height: 14px;
            border-radius: 50%;
            background: var(--accent-cyan);
            cursor: pointer;
            box-shadow: 0 0 8px var(--accent-cyan);
            transition: transform 0.1s;
        }

        .ball2-thumb::-webkit-slider-thumb {
            background: var(--accent-magenta) !important;
            box-shadow: 0 0 8px var(--accent-magenta) !important;
        }

        /* Buttons & Selects */
        .btn-group {
            display: flex;
            gap: 10px;
        }

        button {
            flex: 1;
            padding: 12px;
            background: transparent;
            border: 1px solid var(--accent-cyan);
            color: var(--accent-cyan);
            font-weight: bold;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.2s;
            text-transform: uppercase;
            letter-spacing: 1px;
            box-shadow: inset 0 0 0 0 var(--accent-cyan);
        }

        button:hover {
            background: var(--accent-cyan);
            color: #000;
            box-shadow: 0 0 15px var(--accent-cyan);
        }

        button.reset {
            border-color: var(--text-dim);
            color: var(--text-dim);
        }
        button.reset:hover {
            background: var(--text-dim);
            color: #000;
            box-shadow: 0 0 15px var(--text-dim);
        }

        select, .checkbox-label {
            width: 100%;
            padding: 10px;
            background: rgba(0, 0, 0, 0.4);
            border: 1px solid var(--border-color);
            color: var(--text-color);
            border-radius: 6px;
            outline: none;
            cursor: pointer;
            font-size: 0.85rem;
        }

        .checkbox-container {
            display: flex;
            align-items: center;
            gap: 10px;
            cursor: pointer;
            font-size: 0.85rem;
        }

        .checkbox-container input {
            accent-color: var(--accent-cyan);
            width: 16px;
            height: 16px;
        }

        /* Responsive Layout Switch */
        @media (max-width: 900px) {
            body {
                overflow-y: auto;
                padding: 10px 0;
            }
            .app-container {
                flex-direction: column;
                height: auto;
                width: 95vw;
            }
            .simulation-container {
                height: 50vh;
                min-height: 350px;
            }
            .control-panel {
                max-width: 100%;
                min-width: 0;
            }
        }