.cuboid{
 width:100%;
 height:100%;
 position:relative;
}
.cuboid__side:nth-of-type(1){
 height:calc(var(--thickness) * 1vmin);
 width:100%;
 position:absolute;
 top:0;
 transform:translate(0,-50%) rotateX(90deg);
}
.cuboid__side:nth-of-type(2){
 height:100%;
 width:calc(var(--thickness) * 1vmin);
 position:absolute;
 top:50%;
 right:0;
 transform:translate(50%,-50%) rotateY(90deg);
}
.cuboid__side:nth-of-type(3){
 width:100%;
 height:calc(var(--thickness) * 1vmin);
 position:absolute;
 bottom:0;
 transform:translate(0%,50%) rotateX(90deg);
}
.cuboid__side:nth-of-type(4){
 height:100%;
 width:calc(var(--thickness) * 1vmin);
 position:absolute;
 left:0;
 top:50%;
 transform:translate(-50%,-50%) rotateY(90deg);
}
.cuboid__side:nth-of-type(5){
 height:100%;
 width:100%;
 transform:translate3d(0,0,calc(var(--thickness) * 0.5vmin));
 position:absolute;
 top:0;
 left:0;
}
.cuboid__side:nth-of-type(6){
 height:100%;
 width:100%;
 transform:translate3d(0,0,calc(var(--thickness) * -0.5vmin)) rotateY(180deg);
 position:absolute;
 top:0;
 left:0;
}
*,*:after,*:before{
 box-sizing:border-box;
 transform-style:preserve-3d;
 transition:background 0.25s;
}
:root{
 --base-size:20;
 --helicopter-height:calc(var(--base-size) * 1vmin);
 --helicopter-width:calc(var(--helicopter-height) * 2);
 --helicopter-one:hsl(0,0%,calc((60 + (var(--on,0) * 35)) * 1%));
 --helicopter-two:hsl(0,0%,calc((55 + (var(--on,0) * 35)) * 1%));
 --helicopter-three:hsl(0,0%,calc((50 + (var(--on,0) * 35)) * 1%));
 --helicopter-four:hsl(0,0%,calc((40 + (var(--on,0) * 35)) * 1%));
 --chair-one:hsl(0,0%,calc((20 + (var(--on,0) * 15)) * 1%));
 --chair-two:hsl(0,0%,calc((15 + (var(--on,0) * 15)) * 1%));
 --chair-three:hsl(0,0%,calc((10 + (var(--on,0) * 15)) * 1%));
 --chair-four:hsl(0,0%,calc((5 + (var(--on,0) * 15)) * 1%));
 --dash-one:hsl(0,0%,calc((50 + (var(--on,0) * 15)) * 1%));
 --dash-two:hsl(0,0%,calc((45 + (var(--on,0) * 15)) * 1%));
 --dash-three:hsl(0,0%,calc((40 + (var(--on,0) * 15)) * 1%));
 --dash-four:hsl(0,0%,calc((35 + (var(--on,0) * 15)) * 1%));
 --accent-one:hsl(10,60%,calc((30 + (var(--on,0) * 35)) * 1%));
 --accent-two:hsl(10,60%,calc((25 + (var(--on,0) * 35)) * 1%));
 --accent-three:hsl(10,60%,calc((20 + (var(--on,0) * 35)) * 1%));
 --accent-four:hsl(10,60%,calc((15 + (var(--on,0) * 35)) * 1%));
 --rocket-one:hsl(1,60%,calc((20 + (var(--on,0) * 25)) * 1%));
 --rocket-two:hsl(1,60%,calc((15 + (var(--on,0) * 25)) * 1%));
 --rocket-three:hsl(1,60%,calc((10 + (var(--on,0) * 25)) * 1%));
 --rocket-four:hsl(1,60%,calc((5 + (var(--on,0) * 25)) * 1%));
 --screen-one:hsla( 210,80%,calc((25 + (var(--on,0) * 25)) * 1%),0.45 );
 --screen-two:hsla( 210,80%,calc((25 + (var(--on,0) * 25)) * 1%),0.4 );
 --screen-three:hsla( 210,80%,calc((25 + (var(--on,0) * 25)) * 1%),0.35 );
 --screen-four:hsla( 210,80%,calc((25 + (var(--on,0) * 25)) * 1%),0.35 );
 --bg:hsl(210,80%,calc((15 + (var(--on,0) * 75)) * 1%));
}
.box{
 min-height:100vh;
 display:grid;
 place-items:center;
 background:var(--bg);
 overflow:hidden;
 touch-action:none;
}
.scene{
 position:fixed;
 top:50%;
 left:50%;
 transform:translate3d(-50%,-50%,100vmin);
 transform:translate3d(-50%,-50%,100vmin) rotateX(-24deg) rotateY(44deg) rotateX(calc(var(--rotate-x,0) * 1deg)) rotateY(calc(var(--rotate-y,0) * 1deg));
}
.helicopter{
 height:100%;
 width:100%;
 position:absolute;
 top:50%;
 left:50%;
 transform:translate(-20%,-50%);
}
.helicopter__wrapper{
 position:absolute;
 top:50%;
 left:50%;
 transform:translate(-50%,-50%);
 -webkit-animation:float 1s infinite linear;
 animation:float 1s infinite linear;
 height:var(--helicopter-height);
 width:var(--helicopter-width);
}
@-webkit-keyframes float{
 50%{
  transform:translate(-50%,-65%);
 }
}
@keyframes float{
 50%{
  transform:translate(-50%,-65%);
 }
}
.helicopter__base-light{
 --hue:20;
 bottom:-6%;
 width:6%;
 height:6%;
 left:47%;
 position:absolute;
}
.helicopter__tail-light{
 --hue:15;
 top:-20%;
 width:20%;
 height:20%;
 position:absolute;
 left:65%;
}
.helicopter__wing-light{
 --hue:90;
 --speed:0.4;
 top:-50%;
 width:10%;
 height:50%;
 position:absolute;
 left:45%;
}
.helicopter__wing-light--left{
 transform:translate3d(0,0,calc(var(--base-size) * 0.5vmin));
}
.helicopter__wing-light--right{
 transform:translate3d(0,0,calc(var(--base-size) * -0.5vmin));
}
.helicopter > *{
 position:absolute;
}
.helicopter__rotor{
 top:0;
 left:30%;
 height:14%;
 width:8%;
}
.helicopter__cockpit{
 left:0;
 top:14%;
 width:54%;
 height:70%;
}
.helicopter__tail{
 top:30%;
 height:20%;
 width:46%;
 left:54%;
}
.helicopter__fin{
 right:2%;
 top:10%;
 height:20%;
 width:10%;
}
.helicopter__stabilizer{
 right:2%;
 top:30%;
 height:10%;
 width:10%;
}
.helicopter__skids{
 bottom:0;
 left:0;
 height:6%;
 width:70%;
}
.helicopter__wing{
 height:6%;
 width:22%;
 left:28%;
 top:60%;
}
.helicopter__launchers{
 height:10%;
 width:18%;
 left:30%;
 top:66%;
}
.helicopter__chair{
 position:absolute;
 left:18%;
 top:30%;
 width:28%;
 height:58%;
}
.helicopter__chair-back{
 position:absolute;
 width:25%;
 right:0;
 top:0;
 height:100%;
}
.helicopter__chair-bottom{
 position:absolute;
 height:20%;
 right:0;
 bottom:0;
 width:80%;
}
.helicopter__launcher{
 position:absolute;
 top:0;
 left:0;
 height:100%;
 width:100%;
}
.helicopter__launcher--left{
 transform:translate3d(0,0,calc(var(--base-size) * -0.425vmin));
}
.helicopter__launcher--right{
 transform:translate3d(0,0,calc(var(--base-size) * 0.425vmin));
}
.helicopter__triblade{
 position:absolute;
 height:100%;
 width:100%;
 left:50%;
 top:50%;
 transform:translate3d(-25%,-75%,calc(var(--base-size) * 0.07vmin)) scale(1.25);
 border-radius:50%;
 overflow:hidden;
 -webkit-animation:rotate-tri 0.2s infinite linear;
 animation:rotate-tri 0.2s infinite linear;
}
.helicopter__triblade:after,.helicopter__triblade:before{
 content:'';
 position:absolute;
 top:50%;
 left:50%;
 height:100%;
 width:15%;
 background:var(--chair-four);
 transform:translate(-50%,-50%);
}
.helicopter__triblade:after{
 transform:translate(-50%,-50%) rotate(90deg);
}
@-webkit-keyframes rotate-tri{
 to{
  transform:translate3d(-25%,-75%,calc(var(--base-size) * 0.07vmin)) scale(1.25) rotate(-360deg);
 }
}
@keyframes rotate-tri{
 to{
  transform:translate3d(-25%,-75%,calc(var(--base-size) * 0.07vmin)) scale(1.25) rotate(-360deg);
 }
}
.helicopter__blades{
 height:calc(var(--helicopter-height) * 2);
 width:calc(var(--helicopter-height) * 2);
 left:34%;
 top:0%;
 transform:translate(-50%,-50%) rotateX(90deg) translate3d(0,0,1px);
 border-radius:50%;
 overflow:hidden;
 -webkit-animation:blades infinite 0.1s linear;
 animation:blades infinite 0.1s linear;
}
.helicopter__blades:after,.helicopter__blades:before{
 content:'';
 height:100%;
 width:10%;
 background:linear-gradient( var(--chair-one) 0 5%,var(--accent-one) 5% 10%,var(--chair-one) 10% 90%,var(--accent-one) 90% 95%,var(--chair-one) 95% 100% );
 position:absolute;
 top:50%;
 left:50%;
 transform:translate(-50%,-50%);
}
.helicopter__blades:after{
 transform:translate(-50%,-50%) rotate(90deg);
}
.helicopter__skid{
 position:absolute;
 top:0;
 left:0;
 height:100%;
 width:100%;
}
.helicopter__skid:after,.helicopter__skid:before{
 content:'';
 position:absolute;
 left:16%;
 width:4%;
 bottom:0;
 height:400%;
 background:var(--chair-four);
 transform-origin:50% 100%;
 transform:rotateX(calc(25 * var(--coefficient,1deg)));
}
.helicopter__skid:before{
 left:56%;
}
.helicopter__skid--left{
 transform:translate3d(0,0,calc(var(--base-size) * 0.4vmin));
}
.helicopter__skid--right{
 --coefficient:-1deg;
 transform:translate3d(0,0,calc(var(--base-size) * -0.4vmin));
}
.helicopter__dashboard{
 position:absolute;
 left:2%;
 top:50%;
 width:16%;
 height:38%;
}
@-webkit-keyframes shift{
 0%,10%,90%,100%{
  transform:translate(-20%,-50%) translate3d(0,0,0);
 }
 20%,50%{
  transform:translate(-20%,-50%) translate3d(0,0,10vmin);
 }
 60%,80%{
  transform:translate(-20%,-50%) translate3d(0,0,-10vmin);
 }
}
@keyframes shift{
 0%,10%,90%,100%{
  transform:translate(-20%,-50%) translate3d(0,0,0);
 }
 20%,50%{
  transform:translate(-20%,-50%) translate3d(0,0,10vmin);
 }
 60%,80%{
  transform:translate(-20%,-50%) translate3d(0,0,-10vmin);
 }
}
.cuboid--cockpit{
 --thickness:calc(var(--base-size) * 0.6);
}
.cuboid--cockpit div{
 background:var(--helicopter-four);
}
.cuboid--cockpit div:nth-of-type(1){
 background:linear-gradient( 90deg,var(--screen-one) 0 50%,var(--helicopter-one) 50% 100% ) 50% 50%/100% 100% no-repeat;
}
.cuboid--cockpit div:nth-of-type(2):after{
 content:'';
 position:absolute;
 top:50%;
 left:50%;
 height:calc(100% - 1px);
 width:calc(100% - 1px);
 background:#914db3;
 transform:translate3d( -50%,-50%,calc(var(--helicopter-width) * -0.27) );
}
.cuboid--cockpit div:nth-of-type(4){
 background:transparent;
 background:linear-gradient( var(--screen-two) 0% 80%,var(--helicopter-one) 80% 100% ) 50% 50%/100% 100% no-repeat;
}
.cuboid--cockpit div:nth-of-type(5){
 background:transparent;
 background:linear-gradient( var(--helicopter-three),var(--helicopter-three) ) 100% 50%/50% 100% no-repeat,linear-gradient( var(--screen-three) 0% 80%,var(--helicopter-three) 80% 100% ) 0% 50%/50% 100% no-repeat;
}
.cuboid--cockpit div:nth-of-type(5):after{
 content:'';
 position:absolute;
 top:50%;
 height:50%;
 width:25%;
 right:15%;
 transform:translate3d(0%,-60%,1px) scale(0.75);
 filter:saturate(0.5);
}
.cuboid--cockpit div:nth-of-type(6){
 background:transparent;
 background:linear-gradient( var(--helicopter-two),var(--helicopter-two) ) 0 50%/50% 100% no-repeat,linear-gradient( var(--screen-four) 0% 80%,var(--helicopter-two) 80% 100% ) 100% 50%/50% 100% no-repeat;
}
.cuboid--cockpit div:nth-of-type(6):after{
 content:'';
 position:absolute;
 top:50%;
 height:50%;
 width:25%;
 left:15%;
 transform:translate3d(0%,-60%,1px) scale(0.75);
 filter:saturate(0.5);
}
.cuboid--tail{
 --thickness:calc(var(--base-size) * 0.4);
 --clip:polygon(0 0,100% 40%,100% 60%,0 100%);
}
.cuboid--tail div{
 background:var(--accent-four);
}
.cuboid--tail div:nth-of-type(1){
 background:var(--accent-one);
 -webkit-clip-path:var(--clip);
 clip-path:var(--clip);
}
.cuboid--tail div:nth-of-type(2){
 background:var(--accent-one);
 background:linear-gradient( 90deg,transparent 0 40%,var(--accent-four) 40% 60%,transparent 60% 100% );
}
.cuboid--tail div:nth-of-type(3){
 background:var(--accent-two);
 -webkit-clip-path:var(--clip);
 clip-path:var(--clip);
}
.cuboid--tail div:nth-of-type(4){
 background:var(--accent-three);
}
.cuboid--tail div:nth-of-type(5){
 background:transparent;
}
.cuboid--tail div:nth-of-type(5):after{
 content:'';
 position:absolute;
 top:0;
 left:0;
 height:100%;
 width:100%;
 background:var(--accent-three);
 transform-origin:0 50%;
 transform:rotateY(10deg);
}
.cuboid--tail div:nth-of-type(6){
 background:transparent;
}
.cuboid--tail div:nth-of-type(6):after{
 content:'';
 position:absolute;
 top:0;
 left:0;
 height:100%;
 width:100%;
 background:var(--accent-three);
 transform-origin:100% 50%;
 transform:rotateY(-10deg);
}
.cuboid--stabilizer{
 --thickness:calc(var(--base-size) * 0.4);
}
.cuboid--stabilizer div{
 background:var(--helicopter-four);
}
.cuboid--stabilizer div:nth-of-type(1){
 background:var(--helicopter-one);
}
.cuboid--stabilizer div:nth-of-type(3){
 background:var(--helicopter-two);
}
.cuboid--stabilizer div:nth-of-type(4){
 background:var(--helicopter-three);
}
.cuboid--fin{
 --thickness:calc(var(--base-size) * 0.1);
}
.cuboid--fin div{
 background:var(--helicopter-four);
}
.cuboid--fin div:nth-of-type(1){
 background:linear-gradient( 90deg,transparent 0 50%,var(--helicopter-one) 50% 100% );
}
.cuboid--fin div:nth-of-type(3){
 background:var(--helicopter-two);
}
.cuboid--fin div:nth-of-type(4){
 background:transparent;
}
.cuboid--fin div:nth-of-type(4):after{
 content:'';
 position:absolute;
 bottom:0;
 left:0;
 background:var(--helicopter-two);
 height:110%;
 width:100%;
 transform-origin:50% 100%;
 transform:rotateX(-24deg);
}
.cuboid--fin div:nth-of-type(5){
 background:var(--helicopter-three);
 --clip:polygon(0 100%,50% 0,100% 0,100% 100%);
 -webkit-clip-path:var(--clip);
 clip-path:var(--clip);
}
.cuboid--fin div:nth-of-type(6){
 background:var(--helicopter-three);
 --clip:polygon(0 0%,50% 0,100% 100%,0 100%);
 -webkit-clip-path:var(--clip);
 clip-path:var(--clip);
}
.cuboid--skid{
 --thickness:calc(var(--base-size) * 0.06);
}
.cuboid--skid div{
 background:var(--chair-four);
}
.cuboid--skid div:nth-of-type(1){
 background:var(--chair-one);
}
.cuboid--skid div:nth-of-type(3){
 background:var(--chair-two);
}
.cuboid--skid div:nth-of-type(4){
 background:var(--chair-three);
}
.cuboid--dashboard{
 --thickness:calc(var(--base-size) * 0.52);
}
.cuboid--dashboard div{
 background:var(--dash-four);
}
.cuboid--dashboard div:nth-of-type(1){
 background:var(--dash-one);
}
.cuboid--dashboard div:nth-of-type(3){
 background:var(--dash-two);
}
.cuboid--dashboard div:nth-of-type(4){
 background:var(--dash-three);
}
.cuboid--chair{
 --thickness:calc(var(--base-size) * 0.4);
}
.cuboid--chair div{
 background:var(--chair-four);
}
.cuboid--chair div:nth-of-type(1){
 background:var(--chair-one);
}
.cuboid--chair div:nth-of-type(3){
 background:var(--chair-two);
}
.cuboid--chair div:nth-of-type(4){
 background:var(--chair-three);
}
.cuboid--wing{
 --thickness:calc(var(--base-size) * 1.1);
}
.cuboid--wing div{
 background:var(--accent-four);
}
.cuboid--wing div:nth-of-type(1){
 background:var(--accent-one);
}
.cuboid--wing div:nth-of-type(3){
 background:var(--accent-two);
}
.cuboid--wing div:nth-of-type(4){
 background:var(--accent-three);
}
.cuboid--rotor{
 --thickness:calc(var(--base-size) * 0.14);
}
.cuboid--rotor div{
 background:var(--dash-four);
}
.cuboid--rotor div:nth-of-type(1){
 background:var(--dash-one);
}
.cuboid--rotor div:nth-of-type(3){
 background:var(--dash-two);
}
.cuboid--rotor div:nth-of-type(4){
 background:var(--dash-three);
}
.cuboid--launcher{
 --thickness:calc(var(--base-size) * 0.08);
}
.cuboid--launcher div{
 background:var(--rocket-four);
}
.cuboid--launcher div:nth-of-type(1){
 background:var(--rocket-one);
}
.cuboid--launcher div:nth-of-type(3){
 background:var(--rocket-two);
}
.cuboid--launcher div:nth-of-type(4){
 background:var(--rocket-three);
}
.cuboid--light{
 --thickness:calc(var(--base-size) * 0.035);
 -webkit-animation:flash calc((1 - var(--on,0)) * (var(--speed,1) * 1s)) infinite;
 animation:flash calc((1 - var(--on,0)) * (var(--speed,1) * 1s)) infinite;
}
.cuboid--light div{
 background:hsla(var(--hue,10),90%,50%,var(--alpha,0));
}
.helicopter__ammo{
 height:50%;
 width:30%;
 position:absolute;
 top:50%;
 left:0;
 transform:translate(0,-50%);
}
.cuboid--ammo{
 --thickness:calc(var(--base-size) * 0.05);
}
.cuboid--ammo div{
 background:hsl(var(--hue),80%,80%);
}
button{
 height:48px;
 width:48px;
 position:fixed;
 bottom:1rem;
 right:1rem;
 cursor:pointer;
 transform:translate3d(0,0,150vmin);
 -webkit-appearance:none;
 -moz-appearance:none;
 appearance:none;
 border:0;
 background:transparent;
 outline:transparent;
}
button > svg{
 position:absolute;
 height:100%;
 width:100%;
 top:0;
 left:0;
}
button path{
 fill:hsl(210,80%,calc((90 - (var(--on,0) * 75)) * 1%));
}
button svg:nth-of-type(1),button span:nth-of-type(1){
 display:none;
}
button span{
 position:absolute;
 width:1px;
 height:1px;
 padding:0;
 margin:-1px;
 overflow:hidden;
 clip:rect(0,0,0,0);
 white-space:nowrap;
 border-width:0;
}
[aria-pressed='true'] svg:nth-of-type(1),[aria-pressed='true'] span:nth-of-type(1){
 display:block;
}
[aria-pressed='true'] svg:nth-of-type(2),[aria-pressed='true'] span:nth-of-type(2){
 display:none;
}
@-webkit-keyframes blades{
 to{
  transform:translate(-50%,-50%) rotateX(90deg) translate3d(0,0,1px) rotate(-360deg);
 }
}
@keyframes blades{
 to{
  transform:translate(-50%,-50%) rotateX(90deg) translate3d(0,0,1px) rotate(-360deg);
 }
}
@-webkit-keyframes flash{
 50%{
  --alpha:1;
 }
}
@keyframes flash{
 50%{
  --alpha:1;
 }
}