.bb-art {
    --turn: 0deg;
    --tilt: 0deg;
    --spread: 0px;
    --orbit: 0deg;
    --size: clamp(108px, 15vw, 224px);
    position: relative;
    isolation: isolate;
    display: grid;
    place-items: center;
    min-height: clamp(310px, 34vw, 488px);
    overflow: hidden;
    border: 1px solid #764476;
    border-radius: 5px;
    background: radial-gradient(ellipse at 53% 55%, #522250, #29052a 76%);
}

.bb-art__grid,
.bb-art__axis {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.bb-art__grid {
    background-image:
        linear-gradient(to right, #b77fba22 1px, transparent 1px),
        linear-gradient(to bottom, #b77fba22 1px, transparent 1px);
    background-size: 32px 32px;
    mask-image: radial-gradient(ellipse, #000 12%, transparent 76%);
}

.bb-art__axis--x {
    inset: 50% 8% auto;
    border-top: 1px dashed #f7d7f044;
}

.bb-art__axis--y {
    inset: 8% auto 8% 50%;
    border-left: 1px dashed #f7d7f044;
}

.bb-art__orbit {
    position: absolute;
    width: 73%;
    aspect-ratio: 1;
    border: 1px solid #3fb9b884;
    border-radius: 50%;
    transform: rotate(calc(-21deg + var(--orbit))) scaleY(.64);
}

.bb-art__orbit::before,
.bb-art__orbit::after {
    position: absolute;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #24fbbf;
    box-shadow: 0 0 14px #24fbbf;
    content: '';
}

.bb-art__orbit::before {
    top: 13%;
    left: 13%;
}

.bb-art__orbit::after {
    right: 13%;
    bottom: 13%;
    background: #df39db;
    box-shadow: 0 0 14px #df39db;
}

.bb-art__scene {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    perspective: 980px;
}

.bb-art__cube {
    position: relative;
    width: var(--size);
    aspect-ratio: 1;
    transform-style: preserve-3d;
    transform: rotateX(calc(-24deg + var(--tilt))) rotateY(calc(-36deg + var(--turn)));
}

.bb-art__face {
    --side: #3fb9b8;
    --shine: #b4fff6;
    --dark: #176d71;
    --depth: calc(var(--size) / 2 + var(--spread));
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 3%;
    padding: 2%;
    border: 1px solid var(--shine);
    background: #210622c9;
    backface-visibility: hidden;
    transform: var(--angle) translateZ(var(--depth));
}

.bb-art__face--front { --angle: rotateY(0deg); }
.bb-art__face--back { --angle: rotateY(180deg); }

.bb-art__face--right,
.bb-art__face--left {
    --side: #df39db;
    --shine: #ffb9fa;
    --dark: #86267e;
}

.bb-art__face--right { --angle: rotateY(90deg); }
.bb-art__face--left { --angle: rotateY(-90deg); }

.bb-art__face--top,
.bb-art__face--bottom {
    --side: #24fbbf;
    --shine: #baffdc;
    --dark: #108e70;
}

.bb-art__face--top { --angle: rotateX(90deg); }
.bb-art__face--bottom { --angle: rotateX(-90deg); }

.bb-art__face i {
    border: 1px solid var(--shine);
    border-radius: 3px;
    background: linear-gradient(145deg, var(--shine), var(--side) 37%, var(--dark));
    box-shadow: inset 0 0 0 2px #270d2b24;
}

.bb-art__face i:nth-child(5) {
    background: radial-gradient(circle, var(--shine) 0 11%, var(--dark) 12% 15%, var(--side) 16% 36%, var(--dark) 37%);
}

.bb-art__core {
    position: absolute;
    inset: 30%;
    border-radius: 50%;
    background: #baffdc;
    box-shadow: 0 0 28px #24fbbf, 0 0 80px #24fbbfa8;
}

@media (max-width: 680px) {
    .bb-art {
        --size: clamp(100px, 32vw, 192px);
        min-height: clamp(235px, 65vw, 350px);
    }
}