body {
     font-family: 'Roboto Mono', monospace;
     background-color: #010409;
     color: #c9d1d9;
     margin: 0;
     overflow: hidden;
 }

 #loading-screen {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: #010409;
     display: flex;
     justify-content: center;
     align-items: center;
     flex-direction: column;
     z-index: 1000;
     transition: opacity 0.5s ease;
 }

 #loading-title {
     font-family: 'Orbitron', sans-serif;
     font-size: 2.5rem;
     color: #f0f6fc;
     margin-bottom: 20px;
     letter-spacing: 2px;
     text-shadow: 0 0 10px #00aaff, 0 0 20px #00aaff;
 }

 #loading-bar-container {
     width: 50%;
     max-width: 400px;
     height: 20px;
     border: 2px solid #30363d;
     border-radius: 10px;
     overflow: hidden;
 }

 #loading-bar {
     width: 0%;
     height: 100%;
     background: linear-gradient(90deg, #0052d4, #4364f7, #6fb1fc);
     transition: width 0.3s ease-in-out;
 }

 canvas {
     display: block;
 }

 .ui-panel {
     position: absolute;
     background-color: rgba(13, 17, 23, 0.85);
     border: 1px solid #30363d;
     border-radius: 8px;
     padding: 15px;
     backdrop-filter: blur(5px);
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
     -webkit-backdrop-filter: blur(5px);
     z-index: 100;
 }

 .ui-panel h2 {
     font-family: 'Orbitron', sans-serif;
     color: #f0f6fc;
     border-bottom: 1px solid #30363d;
     padding-bottom: 10px;
     margin-top: 0;
     font-size: 1.25rem;
 }

 #controls-panel {
     top: 20px;
     left: 20px;
     width: 300px;
     max-height: calc(100vh - 40px);
     overflow-y: auto;
 }

 #info-panel {
     bottom: 20px;
     right: 20px;
     width: 320px;
     display: none;
     max-height: calc(100vh - 40px);
     overflow-y: auto;
 }

 #stats-panel {
     bottom: 20px;
     right: 20px;
     width: 300px;
 }

 #time-controls {
     bottom: 20px;
     left: 50%;
     transform: translateX(-50%);
     display: flex;
     gap: 10px;
     align-items: center;
 }

 #date-display {
     top: 20px;
     right: 20px;
     padding: 8px 12px;
     font-size: 0.9rem;
 }

 .control-group {
     margin-bottom: 15px;
 }

 .control-group label {
     display: block;
     margin-bottom: 8px;
     font-weight: bold;
     color: #8b949e;
 }

 .button,
 input[type="range"],
 .checkbox-label {
     transition: all 0.2s ease-in-out;
 }

 .button {
     background-color: #21262d;
     border: 1px solid #30363d;
     color: #c9d1d9;
     padding: 8px 12px;
     border-radius: 6px;
     cursor: pointer;
 }

 .button:hover,
 .button.active {
     background-color: #30363d;
     border-color: #8b949e;
 }

 .button:active {
     transform: scale(0.95);
 }

 .button.play-pause {
     width: 50px;
     height: 45px;
     font-size: 1.2rem;
 }

 input[type="range"] {
     -webkit-appearance: none;
     appearance: none;
     width: 100%;
     height: 8px;
     background: #30363d;
     outline: none;
     border-radius: 4px;
 }

 input[type="range"]::-webkit-slider-thumb {
     -webkit-appearance: none;
     appearance: none;
     width: 18px;
     height: 18px;
     background: #58a6ff;
     cursor: pointer;
     border-radius: 50%;
     border: 2px solid #010409;
 }

 input[type="range"]::-moz-range-thumb {
     width: 18px;
     height: 18px;
     background: #58a6ff;
     cursor: pointer;
     border-radius: 50%;
     border: 2px solid #010409;
 }

 .checkbox-container {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 10px;
 }

 .checkbox-label {
     display: flex;
     align-items: center;
     padding: 5px;
     border-radius: 4px;
     cursor: pointer;
     background-color: #21262d;
     border: 1px solid #30363d;
 }

 .checkbox-label input {
     display: none;
 }

 .checkbox-label .checkmark {
     width: 16px;
     height: 16px;
     border: 1px solid #8b949e;
     border-radius: 3px;
     margin-right: 8px;
     display: inline-block;
     position: relative;
 }

 .checkbox-label input:checked+.checkmark {
     background-color: #58a6ff;
     border-color: #58a6ff;
 }

 .checkbox-label input:checked+.checkmark:after {
     content: '';
     position: absolute;
     left: 5px;
     top: 1px;
     width: 4px;
     height: 8px;
     border: solid white;
     border-width: 0 2px 2px 0;
     transform: rotate(45deg);
 }

 .checkbox-label:hover {
     background-color: #30363d;
 }

 .info-item {
     display: flex;
     justify-content: space-between;
     padding: 5px 0;
     border-bottom: 1px solid #21262d;
 }

 .info-item:last-child {
     border-bottom: none;
 }

 .info-label {
     color: #8b949e;
 }

 .info-value {
     color: #f0f6fc;
     font-weight: bold;
     text-align: right;
 }

 .info-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
 }

 .stats-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
 }

 .close-btn {
     background: none;
     border: none;
     color: #8b949e;
     font-size: 1.5rem;
     cursor: pointer;
 }

 .close-btn:hover {
     color: #f0f6fc;
 }

.menu-buttons-container {
    /* Positioning for horizontal centering and moving to the top */
    position: absolute;
    top: 20px;
    /* Shifted to the right by adding ' + 5px' to the centering calculation */
    left: calc(50% + 5px);
    transform: translateX(-50%);
    /* Flex properties for side-by-side layout and spacing */
    display: flex;
    gap: 8px;
    z-index: 60;
}

.menu-button {
    /* Custom styles for smaller, transparent, borderless buttons */
    background-color: transparent !important;
    color: #c9d1d9;
    text-align: center;
    text-decoration: none;
    border: none;
    padding: 8px 12px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s;
    font-size: 0.9rem;
}

.menu-button:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

#rendering-overlay {
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background-color: rgba(0, 0, 0, 0.7); /* Dark background */
    color: white; 
    display: none; /* Start hidden */
    justify-content: center; 
    align-items: center; 
    font-size: 2em;
    z-index: 50; /* High z-index to be on top of everything */
    transition: opacity 0.5s ease-out; /* For smooth fading */
}