html, body {
    margin: 0;
    padding: 0;
    height: 100%; 
    overflow: hidden; 
}

/* NEW: The parent container for the 66% and 34% columns */
.main-wrapper {
    display: flex;
    height: 100vh;
    width: 100%;
}

/* Updated Container: Uses flexbox for vertical stacking, no float */
#canvas-container {
    display: flex;
    flex-direction: column;
    width: 66%; 
    height: 100vh; /* Takes the full screen height now via the wrapper */
    /* REMOVED: float: left; */
    overflow: hidden;
    position: relative;
    justify-content: flex-start; 
    align-items: stretch; /* Stretch items to fill width */
}

/* The App Section: Does not grow */
.app-section {
    flex: 0 0 auto;
    width: 100%;
    position: relative;
}

/* The Canvas: Uses aspect ratio */
.myCanvas {
    width: 100%;
    height: auto;
    aspect-ratio: 960 / 564; 
    display: block; 
    border: 1px solid black;
    position: relative; 
}

/* The Textarea: Ensure no margins push things down */
#pasteInput {
    width: 100%;
    height: 30px;
    box-sizing: border-box; 
    margin: 0; 
    display: block;
}

/* Iframe Sub-container: Claims all remaining space below the app section */
.iframe-sub-container {
    flex-grow: 1; 
    display: flex;
    flex-direction: row; 
    width: 100%;
}

/* Right Side: Now a flex item, no float */
.right-side {
    display: flex;
    flex-direction: column;
    width: 34%; /* Use 34% to ensure it fits perfectly beside 66% */
    /* REMOVED: float: left; */
    height: 100vh;
}

/* Iframe style: Flex-grow lets them divide the space equally */
.code-frame {
    flex-grow: 1;
    width: 100%;
    height: 100%;
    border: 1px solid black;
}