html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

@media (max-width: 1100px) {
    #material-visualizer {
        inset: 1rem;
    }

    .panel {
        width: calc(100% - 2rem);
        max-width: 760px;
        gap: clamp(0.5rem, 2vw, 1.5rem);
        padding: 0.875rem 1rem;
    }

    .panel__element {
        min-width: 0;
    }

    .dropdown__current {
        width: clamp(76px, 10vw, 100px);
    }
}

@media (max-width: 767px) {
    #material-visualizer {
        inset: 0;
    }

    .three {
        box-shadow: none;
    }

    .panel {
        left: 0;
        bottom: 0;
        width: 100%;
        max-width: none;
        transform: none;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.375rem 0.25rem;
        padding: 0.5rem max(0.5rem, env(safe-area-inset-right))
            max(0.5rem, env(safe-area-inset-bottom))
            max(0.5rem, env(safe-area-inset-left));
        border-radius: 0.75rem 0.75rem 0 0;
    }

    .panel__element {
        min-width: 0;
        gap: 0;
        justify-content: center;
    }

    .panel__zoom-element {
        display: flex;
        grid-column: 1 / -1;
        width: 100%;
        gap: 0.25rem;
    }

    .panel__zoom-element .panel__range {
        flex: 1 1 auto;
        width: auto !important;
        min-width: 72px;
    }

    .panel__element:not(.panel__zoom-element):not(.dropdown) {
        flex-direction: column;
    }

    .panel__text {
        padding: 0.125rem 0.25rem;
        font-size: 0.65rem;
    }

    .panel__icon {
        width: 36px;
        height: 36px;
        padding: 0.325rem;
    }

    .panel__toggle {
        gap: 0;
    }

    .dropdown {
        width: 100%;
        max-width: none;
        padding-left: 0.25rem;
    }

    .dropdown__current {
        width: auto;
        max-width: 58px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .dropdown__icon {
        width: 28px;
        height: 36px;
        margin-left: 0;
    }

    .dropdown__element-color {
        flex: 0 0 14px;
        width: 14px;
        height: 14px;
    }

    .dropdown__elements {
        min-width: 138px;
        padding-bottom: 0.5rem;
    }

    .dropdown__element {
        padding: 0.5rem 0.375rem;
    }
}

@media (max-width: 359px) {
    .panel {
        padding-right: 0.25rem;
        padding-left: 0.25rem;
    }

    .panel__icon {
        width: 32px;
        height: 32px;
    }

    .panel__text {
        font-size: 0.6rem;
    }

    .dropdown__current {
        max-width: 52px;
    }

    .dropdown__icon {
        width: 24px;
        height: 32px;
    }
}