cubic_discord_var.css

html {
    display: flex;
    background: black;
    --cube-width: 65vw;
    --cube-height: 75vh;
    perspective: 650px;
}
html::after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    background: radial-gradient(transparent 80%, #0008);
    pointer-events: none;
}
body {
    width: var(--cube-width);
    height: var(--cube-height);
    margin: auto;
    transform-style: preserve-3d;
    background: transparent;
}
#app-mount::after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 999;
    pointer-events: none;
    background: radial-gradient(transparent 10%, #0003), radial-gradient(transparent 85%, #0005);
    box-shadow: inset 0 0 80px 40px #0005;
}
#app-mount+*, #app-mount+*+*, #app-mount+*+*+*, #app-mount+*+*+*+* {
    display: block;
    position: absolute;
    font-size: 0;
    pointer-events: none;
    background: -moz-element(#app-mount);
    inset: 0;
    filter: brightness(0.75) saturate(0.8);
}
#app-mount+* {
    transform: rotateY(-90deg) translateZ(calc(var(--cube-width)/-2)) translateX(calc(var(--cube-width)/2));
    box-shadow: inset 100px 0 200px #0004;
}
#app-mount+*+* {
    transform: rotateY(90deg) translateZ(calc(var(--cube-width)/-2)) translateX(calc(var(--cube-width)/-2));
    box-shadow: inset -100px 0 200px #0004;
}
#app-mount+*+*+* {
    transform: rotateX(90deg) translateZ(calc(var(--cube-height)/-2)) translateY(calc(var(--cube-height)/2));
    box-shadow: inset 0 100px 200px #0004;
}
#app-mount+*+*+*+* {
    transform: rotateX(-90deg) translateZ(calc(var(--cube-height)/-2)) translateY(calc(var(--cube-height)/-2));
    box-shadow: inset 0 -100px 200px #0004;
}
.drag-previewer, .drag-announcer {
    pointer-events: none;
}