/* Basic body and canvas styling */
body {
    margin: 0;
    overflow: hidden; /* Prevent scrollbars */
    font-family: 'Inter', sans-serif; /* Use Inter font */
    background-color: #111; /* Dark background */
    color: #eee; /* Light text color */
}

canvas {
    display: block; /* Remove extra space below canvas */
}

/* Styling for lil-gui panel */
.lil-gui {
    --widget-height: 32px !important;
    --spacing: 8px !important;
    --font-size: 14px !important;
    --input-font-size: 14px !important;
    --padding: 8px !important;
    --widget-padding: 8px !important;
    --name-width: 45% !important;
    
    /* Modern color scheme */
    --background-color: rgba(35, 35, 35, 0.95) !important;
    --text-color: #ffffff !important;
    --title-background-color: #1a1a1a !important;
    --title-text-color: #ffffff !important;
    --widget-color: #3d3d3d !important;
    --hover-color: #4f4f4f !important;
    --focus-color: #45a9f9 !important;
    --number-color: #45a9f9 !important;
    --string-color: #a2db3c !important;
    --border-radius: 8px !important;

    /* Modern shadow */
    box-shadow: 0 8px 24px rgba(0,0,0,0.2) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    max-height: 100vh !important;
    overflow-y: auto !important;
    pointer-events: auto !important;
    z-index: 1000 !important;
}

.lil-gui .title {
     color: #f9fafb !important; /* Tailwind gray-50 */
     font-weight: 600; /* Semi-bold title */
}

/* Add border between folders */
.lil-gui.root > .children > .lil-gui > .title {
    border-top: 1px solid #4b5563; /* Tailwind gray-600 */
}

.lil-gui .name {
    color: #d1d5db; /* Tailwind gray-300 for labels */
}

.lil-gui .widget {
     border-radius: 4px; /* Rounded widgets */
}

/* Input field styling */
.lil-gui input[type="text"], .lil-gui input[type="number"] {
    background-color: #374151; /* Tailwind gray-700 */
    border: 1px solid #4b5563; /* Tailwind gray-600 */
    color: #e5e7eb; /* Tailwind gray-200 */
    border-radius: 3px;
    padding: 3px 5px;
}

/* Color picker styling */
.lil-gui .color .display {
    border-radius: 3px;
    border: 1px solid #4b5563; /* Tailwind gray-600 */
}

/* General button styling within lil-gui */
.lil-gui button {
    background: var(--focus-color) !important;
    border-radius: 6px !important;
    padding: 8px 12px !important;
    transition: all 0.15s ease !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
}

.lil-gui button:hover {
    background: #2d8ac7 !important;
    transform: translateY(-1px) !important;
}

/* Style the folders */
.lil-gui .folder > .title {
    background: var(--title-background-color) !important;
    padding: 12px var(--padding) !important;
    border-bottom: 1px solid rgba(255,255,255,0.1) !important;
}

/* Style the controllers */
.lil-gui .controller {
    border-radius: 6px !important;
    margin: 4px 0 !important;
    padding: 4px !important;
    transition: background-color 0.15s ease !important;
    pointer-events: auto !important;
}

.lil-gui .controller:hover {
    background-color: var(--hover-color) !important;
}

/* Style the number inputs */
.lil-gui input[type="number"] {
    background: var(--widget-color) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    border-radius: 4px !important;
    padding: 4px 8px !important;
}

/* Style the color pickers */
.lil-gui .color {
    border-radius: 4px !important;
    overflow: hidden !important;
}

/* Add smooth transitions */
.lil-gui * {
    transition: background-color 0.15s ease, border-color 0.15s ease !important;
}

/* Export button special styling */
.lil-gui .export-button button {
    background: linear-gradient(45deg, #45a9f9, #2d8ac7) !important;
    box-shadow: 0 2px 8px rgba(69, 169, 249, 0.2) !important;
}

.lil-gui .export-button button:hover {
    background: linear-gradient(45deg, #2d8ac7, #1d5a84) !important;
    transform: translateY(-1px) !important;
}

/* Ensure folders remain interactive */
.lil-gui .folder {
    pointer-events: auto !important;
}

/* Style the play/pause button */
.play-pause-button {
    font-family: system-ui, -apple-system, sans-serif !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

.play-pause-button:hover {
    transform: scale(1.05) !important;
    background: var(--focus-color) !important;
}

/* Ensure the button container takes full width */
.lil-gui .controller.function .widget {
    width: 100% !important;
}