**INSTRUCTION MANUAL**
Adhere or be terminated.

**LuaCSS and Roact UI Styling Guide**

**1. Overview**

*   **LuaCSS:** A module for styling Roblox UIs using a CSS-like syntax within Lua.
*   **Cascading Styles:** Styles are applied in a cascading manner, similar to CSS. Styles defined later can override earlier styles.
*   **Components:** LuaCSS styles are defined for specific components (e.g., "VehicleRentalPage", "Header") and UI element types (e.g., "Frame", "TextLabel").
*   **Style Sheets:** Styles are grouped into style sheets (`CSS`) and applied to UI elements.

**2. Defining Styles**

*   Use `LuaCSS.CascadingStyles.new()` to create a new style sheet.
*   Use `CSS:forComponent("ComponentName", "ElementType")` to define styles for a specific component and element type.
*   Use `:set("PropertyName", Value)` to set individual style properties.

```lua
local LuaCSS = require(game.ReplicatedStorage.Shared.Modules.LuaCSS)
local CSS = LuaCSS.CascadingStyles.new()

CSS:forComponent("VehicleRentalPage", "Frame")
:set("Size", UDim2.new(0.5, 0, 0.5, 0))
:set("BackgroundColor3", Color3.new(0, 0, 0))
:set("BackgroundTransparency", 0.5)

CSS:forComponent("Header", "TextLabel")
:set("Size", UDim2.new(1, 0, 0, 100))
:set("Position", UDim2.new(0, 0, 0, 0))
:set("BackgroundColor3", Color3.new(1, 0.2, 0.2))
:set("TextColor3", Color3.new(1, 1, 1))
:set("BackgroundTransparency", 0)
:set("TextSize", 96)
```

**3. Applying Styles in Roact**

*   Use `LuaCSS.create("ElementType", { ... }, { ... })` to create UI elements with LuaCSS styles.
*   Specify the `styleSheet` and `styleClass` properties to apply the defined styles.

```lua
local Roact = require(game.ReplicatedStorage.Shared.Modules.LuaCSS).Roact

return Roact.createElement(ErrorBoundary, {}, {
    VehicleRentalPage = LuaCSS.create("Frame", {
        styleSheet = CSS,
        styleClass = "VehicleRentalPage",
    }, {
        Header = LuaCSS.create("TextLabel", {
            styleSheet = CSS,
            styleClass = "Header",
            Text = "Vehicle Rental",
        })
    })
})
```

**4. Important Considerations**

*   **Property Names:** Use the correct Roblox property names (e.g., "BackgroundColor3", "TextSize", "Position").
*   **Value Types:** Ensure that you're using the correct value types for each property (e.g., `UDim2` for "Size" and "Position", `Color3` for "BackgroundColor3").
*   **Anchor Points:** Be mindful of `AnchorPoint` and `Position` interactions. Adjust `Position` to account for the default `AnchorPoint` (0.5, 0.5) or set `AnchorPoint` explicitly.
*   **Specificity:** Styles defined directly in the `LuaCSS.create` call will override styles defined in the style sheet.
*   **Roact Events:** Roact events are handled differently. Use `[Roact.Event.EventName]` to connect events.
*   **DragDetector:** To drag the entire frame, use `DragDetectorDragStyle.Scriptable` and update the position of the frame in the `Drag` event.
*   **State Management:** Use `self:setState()` to update the component's state and trigger re-renders.

**5. Troubleshooting**

*   **"Invalid Children" Error:** Ensure that the `render` function returns a valid Roact element or a table of elements.
*   **Styles Not Applying:** Double-check the component and element names in your `CSS:forComponent` calls. Verify that the `styleSheet` and `styleClass` properties are correctly set in the `LuaCSS.create` call.
*   **Unexpected Layout:** Inspect the `Size`, `Position`, and `AnchorPoint` properties to ensure they are correctly configured.

By keeping these rules and concepts in mind, you should be well-equipped to work with LuaCSS and Roact in this project. Remember to double-check your code for typos and ensure that you're using the correct property names and value types.