* {
    padding: 0;
    margin: 0 auto;
    font-family: sans-serif;
}

:root {
    font-size: min(5px, 1vw, 1vh);
}

body {
    background: #000;
    overflow: hidden;
    height: 100svh;
    position: relative;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    touch-action: none;
}

canvas {
    width: 100%;
    height: 100%;
    background-color: #000;
    touch-action: none;
}

#info {
    position: absolute;
    top: 3rem;
    left: calc(50vw - 8rem);
    width: 16rem;
    background-color: #0009;
    border-radius: 3rem;
    font-size: 3rem;
    color: #fff;
    padding: 2rem;
    text-align: center;
    opacity: 0;
}

#buttons {
    position: absolute;
    top: 3rem;
    left: 3rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;

    transition: opacity 0.3s ease-out, translate 0.3s ease-out, visibility 0.3s ease-out;

    div {
        width: 8rem;
        height: 8rem;
        border-radius: 2rem;
        border: solid 0.5rem #333;
        padding: 2rem;

        display: flex;
        justify-content: center;
        align-items: center;

        background-color: #0009;
        cursor: pointer;

        span {
            color: #fff;
            font-size: 8rem;
        }
    }
}

.panel {
    position: absolute;
    top: 3rem;
    left: 3rem;
    max-height: calc(100% - 6rem);
    overflow-y: scroll;
    box-sizing: border-box;

    display: grid;
    place-items: center;
    background-color: #0009;
    border-radius: 5rem;
    border: solid 0.5rem #333;
    padding: 5rem;

    transition: opacity 0.3s ease-out, translate 0.3s ease-out, visibility 0.3s ease-out;
    translate: -120%;
    opacity: 0;

    & * {
        touch-action: pan-x pan-y;
    }

    h1 {
        width: 100%;
        margin-bottom: 2rem;
        font-size: 3rem;
        font-weight: bold;
        color: #ccc;
    }
}

#setting-panel {
    select {
        appearance: none;
        background-color: #0000;
        color: #fff;
        font-size: 3.5rem;
        padding: 1.5rem 0;
        margin-bottom: 3rem;
        border: #fff solid 0.4rem;
        border-radius: 5rem;
        outline: 0;
        width: 45rem;
        text-align: center;
        text-align-last: center;
        cursor: pointer;

        &::picker(select) {
            appearance: base-select;
        }
    }

    .toggle {
        position: relative;
        width: 12rem;
        height: 6rem;
        border-radius: 3rem;
        background-color: #ddd;
        cursor: pointer;
        transition: background-color 0.4s;
        margin: 2rem 0;

        &:has(:checked) {
            background-color: #4b65d8;

            &::after {
                left: 6rem;
            }
        }

        &::after {
            position: absolute;
            top: 0;
            left: 0;
            width: 6rem;
            height: 6rem;
            border-radius: 50%;
            box-shadow: 0 0 5px rgb(0 0 0 / 20%);
            background-color: #fff;
            content: '';
            transition: left 0.2s ease-out;
        }

        input {
            display: none;
        }
    }

    .toggle:has(#d-check:checked)~#Geo3D-select {
        display: none;
    }

    .toggle:has(#d-check:not(:checked))~#Geo4D-select {
        display: none;
    }
}