body {
    /* Windows 95 Style */
    font-family: 'Arial', sans-serif; /* Common system font */
    line-height: 1.4; /* Slightly tighter line spacing */
    margin: 0;
    padding: 0;
    background-color: #C0C0C0; /* Classic Win95 grey */
    color: #000000; /* Black text */
    /* Remove default margins */
}

header {
    /* Simulate a Window Title Bar */
    background: #000080; /* Classic Win95 blue */
    color: #FFFFFF; /* White text */
    padding: 5px 10px; /* Padding like a title bar */
    text-align: left; /* Title text is usually left-aligned */
    border-bottom: 2px solid #000000; /* Black border at the bottom */
    box-shadow: none; /* Remove shadow */
    font-weight: bold; /* Title bar text is often bold */
    display: flex; /* Use flexbox for potential title bar controls */
    align-items: center; /* Vertically center text */
    justify-content: space-between; /* Space out title and potential controls */
}

header h1 {
    margin: 0;
    font-size: 1.2em; /* Standard title bar font size */
    flex-grow: 1; /* Allow title to take space */
}

header p {
    /* Optional: Can be removed or styled as part of the title bar */
    margin: 0;
    font-size: 0.9em; /* Smaller text */
    color: #B0B0B0; /* Lighter grey for secondary text */
    margin-left: 20px; /* Space from title */
}

main {
    max-width: 1000px;
    margin: 20px auto;
    padding: 15px; /* Add padding inside the main area */
    background-color: #C0C0C0; /* Main content area is also grey */
    /* Win95 border effect */
    border-style: solid;
    border-width: 2px;
    border-color: #FFFFFF #808080 #808080 #FFFFFF; /* Top/Left White, Bottom/Right Dark Grey */
    box-shadow: none; /* Remove shadow */

    /* Change from grid to block for a column layout */
    display: block;
    position: relative; /* Needed for absolute positioning of custom cursor */
}

#gallery-view,
#simulation-view {
     /* Ensure these take full width within main */
     width: 100%;
     /* Add margin to simulation-view to avoid button overlap */
     margin-bottom: 20px;
}

.keyboard-placeholder,
.keyboard-item {
    background: #C0C0C0; /* Keep the same grey background */
    padding: 15px;
    /* Win95 inset border for a container/group box */
    border-style: solid;
    border-width: 2px;
    border-color: #808080 #FFFFFF #FFFFFF #808080; /* Top/Left Dark Grey, Bottom/Right White */
    border-radius: 0; /* No border radius */
    box-shadow: none; /* Remove shadow */
    text-align: center;
    /* Add margin between items when stacked */
    margin-bottom: 15px; /* Add space below each item */
}

.keyboard-placeholder h2,
.keyboard-item h2 {
    margin-top: 0;
    color: #000000; /* Black */
    font-size: 1.1em; /* Slightly smaller heading */
    /* Optional: Add a separator line like a group box label */
    position: relative;
    padding-bottom: 5px;
    margin-bottom: 10px;
}

.keyboard-placeholder h2::after,
.keyboard-item h2::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(to right, #808080, #C0C0C0); /* Gradient line */
}

.keyboard-placeholder:last-child,
.keyboard-item:last-child {
    margin-bottom: 0; /* Remove margin from the last item */
}

/* Style for clickable items */
.clickable {
    cursor: pointer;
}

.clickable:hover {
    /* Simple hover effect */
    background-color: #D0D0D0; /* Slightly lighter grey */
}

#simulation-view {
    /* Style for the simulation container */
    padding: 15px;
    border-style: solid;
    border-width: 2px;
    border-color: #808080 #FFFFFF #FFFFFF #808080; /* Inset border */
    background-color: #C0C0C0;
    position: relative; /* Needed for absolute positioning of custom cursor *inside* this view */
}

.simulation-content {
    min-height: 200px; /* Give it some height */
    margin-bottom: 15px;
    padding: 10px;
    border-style: inset; /* Simple inset border */
    border-width: 2px;
    border-color: #808080 #FFFFFF #FFFFFF #808080; /* Inset border */
    background-color: #FFFFFF; /* White background for content area */
    color: #000000;
    text-align: left; /* Align text left in content area */
    display: flex; /* Use flexbox to center canvas if needed */
    flex-direction: column; /* Stack content vertically */
    align-items: center; /* Center items horizontally */
}

#keyboard-canvas {
    display: block; /* Canvas is a block element */
    margin-bottom: 10px; /* Space below the canvas */
    background-color: #DDDDDD;
    border-style: inset; /* Simple inset border */
    border-width: 2px;
    border-color: #808080 #FFFFFF #FFFFFF #808080; /* Inset border */
}

#custom-cursor {
    position: absolute; /* Position relative to #simulation-view */
    width: 20px; /* Size of the custom cursor */
    height: 20px;
    background-color: red; /* Example color */
    pointer-events: none; /* Ensure clicks pass through to the canvas */
    z-index: 10; /* Ensure it's above the canvas */
    /* Optional: Add a border or different style */
    border: 2px solid yellow;
    border-radius: 50%; /* Make it round */
    margin-left: -10px; /* Center it */
    margin-top: -10px; /* Center it */
    transition: left 0.1s ease-out, top 0.1s ease-out; /* Smooth transition */
}

.back-button {
    /* Basic Win95 button style */
    padding: 5px 10px;
    background-color: #C0C0C0;
    border-style: solid;
    border-width: 2px;
    border-color: #FFFFFF #808080 #808080 #FFFFFF; /* Outset border */
    color: #000000;
    font-family: 'Arial', sans-serif;
    font-size: 1em;
    cursor: pointer;
    text-align: center;
    display: block; /* Make button a block element */
    width: fit-content; /* Only take necessary width */
    margin: 0 auto; /* Center the button */
}

.back-button:active {
    /* Inset effect when clicked */
    border-color: #808080 #FFFFFF #FFFFFF #808080;
}

footer {
    text-align: left; /* Status bar is left-aligned */
    padding: 5px 10px;
    margin-top: 20px;
    background: #C0C0C0; /* Grey background */
    color: #000000; /* Black text */
    /* Win95 inset border for status bar */
    border-top: 2px solid #808080;
    border-left: 2px solid #FFFFFF;
    border-bottom: 2px solid #FFFFFF;
    border-right: 2px solid #808080;
    font-size: 0.9em; /* Smaller text */
}

footer p {
    margin: 0;
}