.container{width:100%;height:500px;display:block;overflow:hidden}.absolute{width:500px;height:500px;display:block;position:fixed;overflow:visible}.absolute>.camera-projection{position:relative;left:-250px;top:-250px}.camera-projection{display:block;transform-style:preserve-3d;transform-origin:0% 0%;translate:50% 0;transform:scale(calc(300/var(--cam-z))) translateX(calc(var(--cam-x)*1px)) translateY(calc(var(--cam-y)*1px)) translateZ(calc(var(--cam-z)*1px)) perspective(calc(var(--cam-z)*var(--cam-projection)*1px));z-index:1}.camera-roll{transform:rotateZ(calc(-1deg*var(--cam-roll)))}.camera-pitch{transform:rotateX(calc(-1deg*var(--cam-pitch)))}.camera-yaw{transform:rotateY(calc(-1deg*var(--cam-yaw)))}.camera{display:block;transform-style:preserve-3d;will-change:transform;transform-origin:0% 0%}.scene{transform-style:preserve-3d}@property --cam-yaw{syntax:"<number>";initial-value:0;inherits:false}@property --cam-pitch{syntax:"<number>";initial-value:0;inherits:false}@property --cam-roll{syntax:"<number>";initial-value:0;inherits:false}@property --cam-projection{syntax:"<number>";initial-value:1;inherits:false}@property --cam-x{syntax:"<number>";initial-value:0;inherits:false}@property --cam-y{syntax:"<number>";initial-value:0;inherits:false}@property --cam-z{syntax:"<number>";initial-value:0;inherits:false}@keyframes spinnies{0%{--cam-yaw: 0}25%{--cam-yaw: 90}50%{--cam-yaw: 180}75%{--cam-yaw: 270}100%{--cam-yaw: 360}}@keyframes uppies{0%, 100%{--cam-pitch: -45}50%{--cam-pitch: 45}}@keyframes rollies{0%, 100%{--cam-roll: -15}50%{--cam-roll: 15}}@keyframes zoomies{0%, 100%{--cam-z: 300}50%{--cam-z: 600}}@property --a-x{syntax:"<number>";initial-value:0;inherits:true}@property --a-y{syntax:"<number>";initial-value:0;inherits:true}@property --a-z{syntax:"<number>";initial-value:0;inherits:true}@property --b-x{syntax:"<number>";initial-value:0;inherits:true}@property --b-y{syntax:"<number>";initial-value:0;inherits:true}@property --b-z{syntax:"<number>";initial-value:0;inherits:true}@property --c-x{syntax:"<number>";initial-value:0;inherits:true}@property --c-y{syntax:"<number>";initial-value:0;inherits:true}@property --c-z{syntax:"<number>";initial-value:0;inherits:true}@property --delta-ab-x{syntax:"<number>";initial-value:0;inherits:false}@property --delta-ab-y{syntax:"<number>";initial-value:0;inherits:false}@property --delta-ab-z{syntax:"<number>";initial-value:0;inherits:false}@property --delta-ac-x{syntax:"<number>";initial-value:0;inherits:false}@property --delta-ac-y{syntax:"<number>";initial-value:0;inherits:false}@property --delta-ac-z{syntax:"<number>";initial-value:0;inherits:false}@property --hypot-ab{syntax:"<number>";initial-value:0;inherits:true}@property --hypot-ac{syntax:"<number>";initial-value:0;inherits:true}@property --ac-dot-ab{syntax:"<number>";initial-value:0;inherits:true}@property --ac-project-ab{syntax:"<number>";initial-value:0;inherits:true}@property --tri-ac-x{syntax:"<number>";initial-value:0;inherits:true}@property --tri-ac-y{syntax:"<number>";initial-value:0;inherits:true}@property --tri-ac-z{syntax:"<number>";initial-value:0;inherits:true}@property --tri-height{syntax:"<number>";initial-value:0;inherits:true}@property --skew-ac-x{syntax:"<number>";initial-value:0;inherits:true}@property --skew-ac-y{syntax:"<number>";initial-value:0;inherits:true}@property --skew-ac-z{syntax:"<number>";initial-value:0;inherits:true}@property --skew-length{syntax:"<number>";initial-value:0;inherits:true}@property --skew-coefficient{syntax:"<number>";initial-value:0;inherits:true}@property --basis-x-x{syntax:"<number>";initial-value:0;inherits:true}@property --basis-x-y{syntax:"<number>";initial-value:0;inherits:true}@property --basis-x-z{syntax:"<number>";initial-value:0;inherits:true}@property --basis-y-x-non-normalized{syntax:"<number>";initial-value:0;inherits:true}@property --basis-y-y-non-normalized{syntax:"<number>";initial-value:0;inherits:true}@property --basis-y-z-non-normalized{syntax:"<number>";initial-value:0;inherits:true}@property --basis-y-length{syntax:"<number>";initial-value:0;inherits:true}@property --basis-y-x{syntax:"<number>";initial-value:0;inherits:true}@property --basis-y-y{syntax:"<number>";initial-value:0;inherits:true}@property --basis-y-z{syntax:"<number>";initial-value:0;inherits:true}@property --basis-z-x{syntax:"<number>";initial-value:0;inherits:true}@property --basis-z-y{syntax:"<number>";initial-value:0;inherits:true}@property --basis-z-z{syntax:"<number>";initial-value:0;inherits:true}@property --ac-dot-basis-x{syntax:"<number>";initial-value:0;inherits:true}.tri{clip-path:polygon(0 0, 0 100%, 100% 0)}.tri,.rect{--delta-ab-x: calc(var(--b-x) - var(--a-x));--delta-ab-y: calc(var(--b-y) - var(--a-y));--delta-ab-z: calc(var(--b-z) - var(--a-z));--delta-ac-x: calc(var(--c-x) - var(--a-x));--delta-ac-y: calc(var(--c-y) - var(--a-y));--delta-ac-z: calc(var(--c-z) - var(--a-z));--hypot-ab: calc(hypot(var(--delta-ab-x), var(--delta-ab-y), var(--delta-ab-z)));--hypot-ac: calc(hypot(var(--delta-ac-x), var(--delta-ac-y), var(--delta-ac-z)));--ac-dot-ab: calc( (var(--delta-ac-x) * var(--delta-ab-x)) + (var(--delta-ac-y) * var(--delta-ab-y)) + (var(--delta-ac-z) * var(--delta-ab-z)) );--ac-project-ab: calc(var(--ac-dot-ab) / pow(var(--hypot-ab), 2));--tri-ac-x: calc(var(--delta-ac-x) - (var(--ac-project-ab) * var(--delta-ab-x)));--tri-ac-y: calc(var(--delta-ac-y) - (var(--ac-project-ab) * var(--delta-ab-y)));--tri-ac-z: calc(var(--delta-ac-z) - (var(--ac-project-ab) * var(--delta-ab-z)));--tri-height: calc(hypot(var(--tri-ac-x), var(--tri-ac-y), var(--tri-ac-z)));width:calc(var(--hypot-ab)*1px);height:calc(var(--tri-height)*1px);--skew-ac-x: calc(var(--ac-project-ab) * var(--delta-ab-x));--skew-ac-y: calc(var(--ac-project-ab) * var(--delta-ab-y));--skew-ac-z: calc(var(--ac-project-ab) * var(--delta-ab-z));--skew-length: calc(hypot(var(--skew-ac-x), var(--skew-ac-y), var(--skew-ac-z)));--skew-coefficient: calc(var(--skew-length) / var(--tri-height) * -1 * sign(var(--ac-dot-ab)));--basis-x-x: calc(var(--delta-ab-x) / var(--hypot-ab));--basis-x-y: calc(var(--delta-ab-y) / var(--hypot-ab));--basis-x-z: calc(var(--delta-ab-z) / var(--hypot-ab));--ac-dot-basis-x: calc( (var(--delta-ac-x) * var(--basis-x-x)) + (var(--delta-ac-y) * var(--basis-x-y)) + (var(--delta-ac-z) * var(--basis-x-z)) );--basis-y-x-non-normalized: calc(var(--delta-ac-x) - (var(--ac-dot-basis-x) * var(--basis-x-x)));--basis-y-y-non-normalized: calc(var(--delta-ac-y) - (var(--ac-dot-basis-x) * var(--basis-x-y)));--basis-y-z-non-normalized: calc(var(--delta-ac-z) - (var(--ac-dot-basis-x) * var(--basis-x-z)));--basis-y-length: calc(hypot( var(--basis-y-x-non-normalized), var(--basis-y-y-non-normalized), var(--basis-y-z-non-normalized) ));--basis-y-x: calc(var(--basis-y-x-non-normalized) / var(--basis-y-length));--basis-y-y: calc(var(--basis-y-y-non-normalized) / var(--basis-y-length));--basis-y-z: calc(var(--basis-y-z-non-normalized) / var(--basis-y-length));--basis-z-x: calc(var(--basis-x-y) * var(--basis-y-z) - var(--basis-x-z) * var(--basis-y-y));--basis-z-y: calc(var(--basis-x-z) * var(--basis-y-x) - var(--basis-x-x) * var(--basis-y-z));--basis-z-z: calc(var(--basis-x-x) * var(--basis-y-y) - var(--basis-x-y) * var(--basis-y-x));position:absolute;transform-origin:0% 0%;transform:matrix3d(var(--basis-x-x), var(--basis-x-y), var(--basis-x-z), 0, calc(var(--basis-y-x) - var(--skew-coefficient)*var(--basis-x-x)), calc(var(--basis-y-y) - var(--skew-coefficient)*var(--basis-x-y)), calc(var(--basis-y-z) - var(--skew-coefficient)*var(--basis-x-z)), 0, var(--basis-z-x), var(--basis-z-y), var(--basis-z-z), 0, var(--a-x), var(--a-y), var(--a-z), 1);overflow:hidden}.rect.full-texture{overflow:visible}@property --texture-a-s{syntax:"<number>";initial-value:0;inherits:true}@property --texture-a-t{syntax:"<number>";initial-value:0;inherits:true}@property --texture-b-s{syntax:"<number>";initial-value:0;inherits:true}@property --texture-b-t{syntax:"<number>";initial-value:0;inherits:true}@property --texture-c-s{syntax:"<number>";initial-value:0;inherits:true}@property --texture-c-t{syntax:"<number>";initial-value:0;inherits:true}@property --delta-ab-s{syntax:"<number>";initial-value:0;inherits:true}@property --delta-ab-t{syntax:"<number>";initial-value:0;inherits:true}@property --delta-ac-s{syntax:"<number>";initial-value:0;inherits:true}@property --delta-ac-t{syntax:"<number>";initial-value:0;inherits:true}@property --ab-cross-ac{syntax:"<number>";initial-value:0;inherits:true}@property --texture-ab-length{syntax:"<number>";initial-value:0;inherits:true}@property --texture-ac-length{syntax:"<number>";initial-value:0;inherits:true}@property --texture-size-x{syntax:"<number>";initial-value:0;inherits:true}@property --texture-size-y{syntax:"<number>";initial-value:0;inherits:true}@property --texture-rotation{syntax:"<angle>";initial-value:0;inherits:true}@property --texture-skew-angle{syntax:"<angle>";initial-value:0;inherits:true}@property --texture-translation-s{syntax:"<number>";initial-value:0;inherits:true}@property --texture-translation-t{syntax:"<number>";initial-value:0;inherits:true}.rect::after,.tri::after{content:"";display:block;position:absolute;backface-visibility:visible;width:1000px;height:1000px;background-repeat:no-repeat;background-image:var(--texture-image);--delta-ab-s: calc(var(--texture-b-s) - var(--texture-a-s));--delta-ab-t: calc(var(--texture-b-t) - var(--texture-a-t));--delta-ac-s: calc(var(--texture-c-s) - var(--texture-a-s));--delta-ac-t: calc(var(--texture-c-t) - var(--texture-a-t));--ab-cross-ac: calc( var(--delta-ab-s) * var(--delta-ac-t) - var(--delta-ab-t) * var(--delta-ac-s) );--texture-ab-length: calc( hypot( var(--delta-ab-s), var(--delta-ab-t) ) );--texture-ac-length: calc( hypot( var(--delta-ac-s), var(--delta-ac-t) ) );--texture-size-y: calc(var(--hypot-ab) / var(--texture-ab-length));--texture-size-x: calc(var(--hypot-ac) / var(--texture-ac-length));background-size:calc(var(--texture-size-x)*1px) calc(var(--texture-size-y)*1px);--texture-rotation: calc(-1 * atan2(var(--delta-ab-t), var(--delta-ab-s)));--texture-skew-angle: calc( -90deg + acos( calc( (var(--delta-ab-s) * var(--delta-ac-s) + var(--delta-ab-t) * var(--delta-ac-t)) / (var(--texture-ab-length) * var(--texture-ac-length)) ) ) );--texture-translation-s: calc(var(--texture-size-x) * var(--texture-a-s) * -1);--texture-translation-t: calc(var(--texture-size-y) * var(--texture-a-t) * -1);image-rendering:pixelated;transform-origin:0% 0%;transform:scaleY(sign(var(--ab-cross-ac))) matrix(calc(tan(var(--texture-skew-angle))*sin(var(--texture-rotation)) + cos(var(--texture-rotation))), sin(var(--texture-rotation)), calc(tan(var(--texture-skew-angle))*cos(var(--texture-rotation)) - sin(var(--texture-rotation))), cos(var(--texture-rotation)), calc(var(--texture-translation-s)*(tan(var(--texture-skew-angle))*sin(var(--texture-rotation)) + cos(var(--texture-rotation))) + var(--texture-translation-t)*(tan(var(--texture-skew-angle))*cos(var(--texture-rotation)) - sin(var(--texture-rotation)))), calc(var(--texture-translation-s)*sin(var(--texture-rotation)) + var(--texture-translation-t)*cos(var(--texture-rotation))))}@property --node-rotation-x{syntax:"<number>";initial-value:0;inherits:false}@property --node-rotation-y{syntax:"<number>";initial-value:0;inherits:false}@property --node-rotation-z{syntax:"<number>";initial-value:0;inherits:false}@property --node-rotation-angle{syntax:"<angle>";initial-value:0deg;inherits:false}@property --node-scale{syntax:"<number>";initial-value:1;inherits:false}@property --node-translate-x{syntax:"<length>";initial-value:0px;inherits:false}@property --node-translate-y{syntax:"<length>";initial-value:0px;inherits:false}@property --node-translate-z{syntax:"<length>";initial-value:0px;inherits:false}.node{transform-origin:0;transform-style:preserve-3d}