:root {
            --menu-width: 40%;
            --scene-width: 100%;
            /*--scene-height: 400px;*/
            /*--scene-height: clamp(200px, 40vh, 500px);*/
            --scene-height: calc(50vh - 10px);
            --color-red: #FF0000;
            --color-blue: #0000FF;
            --color-yellow: #FFFF00;
            --color-green: #008000;
            --color-orange: #FFA500;
            --color-purple: #800080;
            --color-cyan: #00FFFF;
            --color-magenta: #FF00FF;
        }

@media (max-width: 992px) {
    .training h1 {
        font-size: 100%;
    }

    .training p {
        font-size: 100%;
    }
    .trainingitem label {
        font-size: 80%;
    }
}
        /* Essential Reset */
        * { box-sizing: border-box; }

        #sectiontraining {
            font-family: "Tahoma", sans-serif;
            margin: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            user-select: none;
        }

        #scene {
            display: flex;
            width: var(--scene-width);
            height: var(--scene-height);
            background: linear-gradient(135deg, #495057, #868e96); 
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
            position: relative; /* All .content items align to this */
            overflow: hidden;
            border-radius: 25px;
        }

        #left-zone {
            width: var(--menu-width);
            height: 100%;
            display: flex;
            align-items: center;
            background: white;
            z-index: 10; /* Keeps menu above the sliding content */
            border-right: 2px solid var(--color-gray);
        }

        .traininglist {
            list-style: none;
            padding: 0;
            margin: 0;
            width: 100%;
            color: #495057;
        }

        .trainingitem input[type="radio"] {
            display: none;
        }

        /* Label Styling */
        .trainingitem label {
            display: block;
            height: 40px;
            line-height: 40px;
            text-align: right;
            opacity: 0.4;
            cursor: pointer;
            transition: all 0.3s ease;
            /*font-weight: bold;*/
            text-transform: uppercase;
            letter-spacing: 1px;
            padding-right: 20px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .trainingitem label:hover {
            opacity: 0.7;
        }

        /* --- THE FIX: SHARED CONTENT LAYER --- */
        .training-content {
            position: absolute;
            /* Anchored to the right side of the menu */
            left: var(--menu-width); 
            /* Hidden above the frame by default */
            top: calc(var(--scene-height) * -1); 
            width: calc(var(--scene-width) - var(--menu-width));
            height: 100%;
            
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background: white;
            
            /* Animation logic */
            transition: top 0.6s cubic-bezier(0.455, 0.03, 0.515, 0.955), opacity 0.4s;
            opacity: 0;
            z-index: 1;
            padding: 20px;
        }

        /* Active State logic */
        .trainingitem input[type="radio"]:checked ~ label {
            opacity: 1;
            border-right: 5px solid;
        }

        .trainingitem input[type="radio"]:checked ~ .training-content {
            top: 0; /* Slides into view */
            opacity: 1;
            z-index: 5;
        }

        /* Color Assignments */
        #radio_red:checked ~ label { color: var(--color-red); border-color: var(--color-red); }
        #radio_blue:checked ~ label { color: var(--color-blue); border-color: var(--color-blue); }
        #radio_yellow:checked ~ label { color: var(--color-yellow); border-color: var(--color-yellow); }
        #radio_green:checked ~ label { color: var(--color-green); border-color: var(--color-green); }
        #radio_orange:checked ~ label { color: var(--color-orange); border-color: var(--color-orange); }
        #radio_purple:checked ~ label { color: var(--color-purple); border-color: var(--color-purple); }
        #radio_cyan:checked ~ label { color: var(--color-cyan); border-color: var(--color-cyan); }
        #radio_magenta:checked ~ label { color: var(--color-magenta); border-color: var(--color-magenta); }


        .content_red h1 { color: var(--color-red); }
        .content_blue h1 { color: var(--color-blue); }
        .content_yellow h1 { color: var(--color-yellow); }
        .content_green h1 { color: var(--color-green); }
        .content_orange h1 {color: var(--color-orange);}
        .content_purple h1 {color: var(--color-purple);}
        .content_cyan h1 {color: var(--color-cyan);}
        .content_magenta h1 {color: var(--color-magenta);}