body{
            max-width: 100%;
            max-height: 100vh;
            overflow: clip;
            background: var(--background);
        }

        /* --- UI CONTROLS --- */
        #ui-controls {
            position: absolute;
            top: calc(var(--gap)*1.25);
            left: calc(var(--gap)*1.25);
            z-index: 100;
            display: flex;
            gap: calc(var(--gap)*1);
            background: hsl(0 0 50 / .25);
            backdrop-filter: blur(1px);
            padding: calc(var(--gap)*.5);
            border-radius: 100vh;


            a{
                width: 3rem;
                aspect-ratio: 1 / 1;
                background: hsl(0 0 50 / 0);
                border-radius: 100vh;
                display: grid;
                place-content: center;
                transition: background 250ms ease;
                

                &:hover{
                    background: hsl(0 0 50 / .125);

                    .back-arrow{
                        background: hsl(0 0 5); 
                    }
                }

                .back-arrow{
                    animation: none;
                    width: 1.25rem;
                    background: hsl(0 0 5 / .25);
                    transition: background 250ms ease;
                }
            }
        }

        /* Hide the ugly default file input */
        #file-input {
            display: none;
        }

        /* Style the label to look like a button */
        .btn {
            background: hsl(0 0 50 / 0);
            color: hsl(0 0 5 / .25) !important;
            padding: calc(var(--gap)*.5) calc(var(--gap)*1);
            border-radius: 100vh;
            cursor: pointer;
            font-size: calc(var(--fs)*.85);
            font-weight: 500;
            letter-spacing: calc(var(--fs)*.062);
            border: none;
            display: grid;
            place-content: center;
            text-transform: uppercase;
            transition: background 250ms ease;
        }
        .btn:hover {
            background: hsl(0 0 50 / .125);
            color: hsl(0 0 5) !important;
        }
        
        /* .btn-secondary {
            background: hsl(from var(--surface) h s l / 0);
            color: var(--text-bright);
        }
        .btn-secondary:hover {
            background: hsl(from var(--surface) h s l / .125);
        } */

        /* --- CANVAS --- */
        #canvas-container {
            width: 100vw;
            height: 100vh;
            overflow: hidden;
            cursor: grab;
            display: flex;
            justify-content: center;
            align-items: center;
            
            /* REMOVED: background: url(BG.svg); */
            /* REMOVED: object-fit: cover; (Not needed for background images) */
            
            background-repeat: repeat;
            background-color: hsl(0 0 90);
            
            /* IMPORTANT: We generally do NOT want transitions on background-position 
               when dragging, or it will feel 'laggy'. */
            transition: background-color 0.3s ease; 
        }
        #canvas-container:active { cursor: grabbing; }

        #zoom-wrapper {
            transform-origin: 0 0;
            min-width: 100px;
            min-height: 100px;
            /* Optional: Add a transition for smooth resetting, 
               but disable it during panning if you want raw 1:1 feel */
            transition: transform 0.1s linear;
        }
        
        /* Empty state message */
        #empty-message {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            pointer-events: none;
            text-align: center;

            h2{
                color: var(--clr-intersect) !important;
            }

            p{
                color: var(--clr-neutral-700);
            }
            
        }

        .creidits{
            width: 70%;
            border-radius: calc(var(--border-radius)*3);
            position: absolute;
            right: 50%;
            bottom: calc(var(--gap)*1);
            translate: 50% 0;
            padding: calc(var(--gap)*2);
            background: hsl(0 0 50 / .01);
            z-index: 999;
            transition: all 250ms ease;

            @media (width > 50em){
                width: 25%;
                right: calc(var(--gap)*3);
                bottom: calc(var(--gap)*1);
                translate: 0;
            }

            .credite-row{
                display: grid;
                grid-template-columns: 5rem 1fr;
                align-items: center;
                gap: var(--gap);

                svg{
                    width: 100%;
                    fill: hsla(0 0 0 / .125);
                }

                .content{

                    h3{
                        font-size: var(--fs);
                        color: hsla(0 0 0 / .125) !important;
                    }

                    p{
                        font-size: calc(var(--fs)*.7);
                        color: hsla(0 0 0 / .125) !important;
                    }
                }
            }

            &:hover{
                opacity: 1;
                background: hsl(0 0 50 / .062);
                backdrop-filter: blur(5px);

                svg{
                    fill: hsla(0 0 0 / .75) !important;
                }

                .content{

                    h3{
                        color: hsla(0 0 50 / 1) !important;
                    }

                    p{
                        color: hsla(0 0 0 / 1) !important;
                    }
                }
            }

        }

        button{
            background: none;

            &::before{
                background: none !important;
            }
        }