body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-color: #f0f0f0;
            margin: 0;
            flex-direction: column;
        }

        .puzzle-container {
            display: grid;
            grid-template-columns: repeat(4, 100px); /* 4 columns, 100px each */
            grid-template-rows: repeat(4, 100px);    /* 4 rows, 100px each */
            gap: 5px;
            border: 2px solid #333;
            background-color: #eee;
            position: relative;
        }

        .tile {
            width: 100px;
            height: 100px;
            background-color: #666;
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 2em;
            cursor: pointer;
            transition: transform 0.2s ease-in-out; /* Smooth transition for movement */
            box-sizing: border-box;
            border: 1px solid #ccc;
            position: absolute; /* Needed for positioning with X/Y coordinates */
        }

        .tile-blank {
            background-color: #ccc;
            cursor: default;
        }

        /* Initial positions of the tiles */
        /* Each tile needs to be absolutely positioned based on its X and Y coordinates. */
        /*  The "X" and "Y" here represent the column and row position (0-indexed). */
        /*  For example, tile-x-0-y-0 is at the top-left (first column, first row).  */

        /* Row 0 */
        .tile-x-0-y-0 { transform: translate(0px, 0px); }
        .tile-x-1-y-0 { transform: translate(105px, 0px); }
        .tile-x-2-y-0 { transform: translate(210px, 0px); }
        .tile-x-3-y-0 { transform: translate(315px, 0px); }

        /* Row 1 */
        .tile-x-0-y-1 { transform: translate(0px, 105px); }
        .tile-x-1-y-1 { transform: translate(105px, 105px); }
        .tile-x-2-y-1 { transform: translate(210px, 105px); }
        .tile-x-3-y-1 { transform: translate(315px, 105px); }

        /* Row 2 */
        .tile-x-0-y-2 { transform: translate(0px, 210px); }
        .tile-x-1-y-2 { transform: translate(105px, 210px); }
        .tile-x-2-y-2 { transform: translate(210px, 210px); }
        .tile-x-3-y-2 { transform: translate(315px, 210px); }

        /* Row 3 */
        .tile-x-0-y-3 { transform: translate(0px, 315px); }
        .tile-x-1-y-3 { transform: translate(105px, 315px); }
        .tile-x-2-y-3 { transform: translate(210px, 315px); }
        .tile-x-3-y-3 { transform: translate(315px, 315px); }


        /* CSS "Checkbox Hack" for interaction */
        input[type="radio"] {
            display: none; /* Hide the radio buttons */
        }

        /* Each tile and its label will be associated with a radio button. */
        /* When a radio button associated with a tile is checked, the tile can move. */
        /* The blank space is also a tile, but has a different appearance. */

        /* Example: Moving tile 1 towards the blank space */
        #radio-1:checked ~ .puzzle-container .tile-x-0-y-0.tile-1 { /* If tile 1 is clicked and the blank is adjacent */
            transform: translate(105px, 0px); /* Move tile 1 to the right */
        }
        /* ... more CSS for all possible moves, this can become quite extensive. */
        /*  This is the core concept, but for a complete puzzle, you would need to define */
        /*  the logic for every possible tile movement and every possible blank position. */
        /*  This approach, while achievable without JavaScript, becomes unwieldy for larger puzzles. */