body
{
        margin: 0;
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #05060a;
        color: #f5f5f5;
        font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
}

.scene
{
        width: 200px;
        height: 200px;
        perspective: 800px;
        perspective-origin: 50% 50%;
}

@scope (.shape) 
{
        :scope
        {
                --shape-size: 200px;
                --shape-depth: 200px;
                --panel-count: 6;
                --panel-gap: 0px;

                --rotate-x: -20deg;
                --rotate-y: 25deg;
                --rotate-z: 0deg;

                --perspective: 800px;
                --perspective-origin-x: 50%;
                --perspective-origin-y: 50%;

                --animation-duration: 2000ms;
                --animation-easing: ease-in-out;

                --face-front-rotate: 0deg;
                --face-left-rotate: -90deg;
                --face-back-rotate: 180deg;
                --face-right-rotate: 90deg;
                --face-top-rotate: 90deg;
                --face-bottom-rotate: -90deg;

                
                position: relative;
                width: 100%;
                height: 100%;
                transform-style: preserve-3d;
                transform: rotateX(-20deg) rotateY(25deg) rotateZ(0deg);
                transition: transform 2000ms ease-in-out;
        }

        :scope .shape__face
        {
                position: absolute;
                width: 100%;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                background: linear-gradient(135deg, #1b1f2a, #2c3244);
                outline: 1px solid rgba(255, 255, 255, 0.15);
                box-sizing: border-box;
        }

        :scope .shape__face--front      { transform: rotateY(var(--face-front-rotate))  translateZ(calc(var(--shape-depth) / 2)); }
        :scope .shape__face--left       { transform: rotateY(var(--face-left-rotate))   translateZ(calc(var(--shape-depth) / 2)); }
        :scope .shape__face--back       { transform: rotateY(var(--face-back-rotate))   translateZ(calc(var(--shape-depth) / 2)); }
        :scope .shape__face--right      { transform: rotateY(var(--face-right-rotate))  translateZ(calc(var(--shape-depth) / 2)); }
        :scope .shape__face--top        { transform: rotateX(var(--face-top-rotate))    translateZ(calc(var(--shape-depth) / 2)); }
        :scope .shape__face--bottom     { transform: rotateX(var(--face-bottom-rotate)) translateZ(calc(var(--shape-depth) / 2)); }
}