*{box-sizing:border-box;transform-style:preserve-3d}body{accent-color:hsl(187 100% 57%);display:grid;place-items:center;min-height:100vh;margin:0;background:#191919}main{display:grid;place-items:center;grid-gap:2rem}.note{margin:0;max-width:320px;text-align:center;font-family:sans-serif;font-size:.8rem;line-height:1.4;color:#999}.controls{display:grid;grid-template-columns:repeat(1,auto);grid-gap:1.5rem}.controls p{grid-column:1 / -1;margin:0;color:#ccc;line-height:1;max-width:320px}.control-group{display:grid;grid-gap:.5rem 0;grid-template-columns:100px auto}label{font-family:sans-serif;color:#fff;font-weight:700}.cuboid{height:100%;width:100%;position:relative}.cuboid__side{background:currentColor;position:absolute;height:100%;width:100%;filter:brightness(var(--brightness, 1))}.cuboid__side:nth-of-type(1){--brightness: .8;top:0;height:var(--depth, 50vmin);transform:translateY(-50%) rotateX(-90deg)}.cuboid__side:nth-of-type(2){--brightness: .6;top:50%;right:0;width:var(--depth, 50vmin);transform:translate(50%,-50%) rotateY(90deg)}.cuboid__side:nth-of-type(3){--brightness: 1.3;bottom:0;height:var(--depth, 50vmin);transform:translateY(50%) rotateX(90deg)}.cuboid__side:nth-of-type(4){--brightness: .6;top:50%;width:var(--depth, 50vmin);transform:translate(-50%,-50%) rotateY(90deg)}.cuboid__side:nth-of-type(5){--brightness: .75;transform:translateZ(calc(var(--depth, 50vmin) / -2))}.cuboid__side:nth-of-type(6){--brightness: 1;transform:translateZ(calc(var(--depth, 50vmin) / 2)) rotateY(180deg)}.result{border-radius:6px;height:50vmin;aspect-ratio:1;background:#262626;display:grid;place-items:center}.cube{--depth: 25vmin;height:var(--depth);width:var(--depth);color:#fe6dc6;transform:translateZ(100vmin) rotateX(-24deg) rotateY(32deg) rotateX(calc(var(--rotate-x, 0) * 1deg)) rotateY(calc(var(--rotate-y, 0) * 1deg)) rotate(calc(var(--rotate-z, 0) * 1deg))}