.glass3d {
    --filter-glass3d: blur(2px) brightness(0.85) saturate(2.5);
    --filter-glass3d: blur(2px) brightness(1.15);
    --color-glass3d: hsl(189 80% 10% / 0.2);

    position: relative;
    z-index: 4;
    box-shadow:
        0 0 0.75px hsl(205 20% 10% / 0.2),
        0.7px 0.8px 1.2px -0.4px hsl(205 20% 10% / 0.1),
        1.3px 1.5px 2.2px -0.8px hsl(205 20% 10% / 0.1),
        2.3px 2.6px 3.9px -1.2px hsl(205 20% 10% / 0.1),
        3.9px 4.4px 6.6px -1.7px hsl(205 20% 10% / 0.1),
        6.5px 7.2px 10.9px -2.1px hsl(205 20% 10% / 0.1),
        8px 9px 14px -2.5px hsl(205 20% 10% / 0.2);
}

.glass3d::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    overflow: hidden;
    z-index: 3;

    -webkit-backdrop-filter: var(--filter-glass3d);
    backdrop-filter: var(--filter-glass3d);
    background-color: var(--color-glass3d);
    background-image: var(--noise-glass3d);
    background-size: 100px;
    background-repeat: repeat;
}

.glass3d::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    overflow: hidden;
    z-index: 5;

    box-shadow:
        inset 2px 2px 1px -3px hsl(205 20% 90% / 0.8),
        inset 4px 4px 2px -6px hsl(205 20% 90% / 0.3),
        inset 1.5px 1.5px 1.5px -0.75px hsl(205 20% 90% / 0.15),
        inset 1.5px 1.5px 0.25px hsl(205 20% 90% / 0.03),
        inset 0 0 0.25px 0.5px hsl(205 20% 90% / 0.03);
}

.glass3d>* {
    position: relative;
    z-index: 6;
}