@layer normalize{html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}}@property --hue{syntax: "<integer>"; inherits: true; initial-value: 0;}*{box-sizing:border-box}:root{--perspective: 1000;--cuboid-height: 14;--cuboid-width: 14;--cuboid-depth: 14;--x: 0;--y: 0;--z: 7;--rotate-x: -30;--rotate-y: -24;--plane-width: 14;--plane-height: 14;--rotate-cuboid-x: 0;--rotate-cuboid-y: 0;--rotate-cuboid-z: 0}body{min-height:100vh;background:#1a1a1a;overflow:hidden}.scene{perspective:calc(var(--perspective, 800) * 1px);transform-style:preserve-3d;height:100vh;width:100vw;display:flex;align-items:center;justify-content:center}.plane{height:calc(var(--plane-height, 25) * 1vmin);width:calc(var(--plane-width, 25) * 1vmin);transform-style:preserve-3d;transform:rotateX(calc(var(--rotate-x, -24) * 1deg)) rotateY(calc(var(--rotate-y, -24) * 1deg)) rotateX(90deg)}.cuboid{--width: var(--cuboid-width, 15);--height: var(--cuboid-height, 10);--depth: var(--cuboid-depth, 4);height:calc(var(--depth) * 1vmin);width:calc(var(--width) * 1vmin);transform-style:preserve-3d;position:absolute;transform:translate3d(calc(var(--x, 4) * 1vmin),calc(var(--y, 5) * 1vmin),calc(var(--z, 0) * 1vmin)) rotateX(-90deg) rotateY(calc(var(--rotate-cuboid-y, 0) * 1deg)) rotate(calc(var(--rotate-cuboid-z, 0) * 1deg))}.cuboid>div:nth-of-type(1){height:calc(var(--height) * 1vmin);width:100%;transform-origin:50% 50%;transform:rotateX(-90deg);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotateX(-90deg) translateZ(calc((var(--depth) / 2) * 1vmin))}.cuboid>div:nth-of-type(2){height:calc(var(--height) * 1vmin);width:100%;transform-origin:50% 50%;transform:translate(-50%,-50%) rotateX(-90deg) rotateY(180deg) translateZ(calc((var(--depth) / 2) * 1vmin));position:absolute;top:50%;left:50%}.cuboid>div:nth-of-type(3){height:calc(var(--height) * 1vmin);width:calc(var(--depth) * 1vmin);transform:translate(-50%,-50%) rotateX(-90deg) rotateY(90deg) translateZ(calc((var(--width) / 2) * 1vmin));position:absolute;top:50%;left:50%}.cuboid>div:nth-of-type(4){height:calc(var(--height) * 1vmin);width:calc(var(--depth) * 1vmin);transform:translate(-50%,-50%) rotateX(-90deg) rotateY(-90deg) translateZ(calc((var(--width) / 2) * 1vmin));position:absolute;top:50%;left:50%}.cuboid>div:nth-of-type(5){height:calc(var(--depth) * 1vmin);width:calc(var(--width) * 1vmin);transform:translate(-50%,-50%) translateZ(calc((var(--height) / 2) * 1vmin));position:absolute;top:50%;left:50%}.cuboid>div:nth-of-type(6){height:calc(var(--depth) * 1vmin);width:calc(var(--width) * 1vmin);transform:translate(-50%,-50%) translateZ(calc((var(--height) / 2) * -1vmin)) rotateX(180deg);position:absolute;top:50%;left:50%}.demo-cuboid>div{background:hsl(180,50%,calc(var(--lightness, 50) * 1%))}.demo-cuboid>div:nth-of-type(1),.demo-cuboid>div:nth-of-type(5){--lightness: 40}.demo-cuboid>div:nth-of-type(2),.demo-cuboid>div:nth-of-type(4){--lightness: 50}.demo-cuboid>div:nth-of-type(3){--lightness: 60}.cube-shadow{height:100%;width:100%;background:#40bfbf;filter:blur(15px);position:absolute}.cube-spin,.cube-squish,.cube-wrap{height:100%;width:100%;transform-style:preserve-3d}.cuboid__mouth{position:absolute;height:3vmin;width:3vmin;border-radius:50%;background:#000;overflow:hidden;top:45%;left:50%;transform:translate(-50%,-50%);clip-path:inset(50% 0 0 0);-webkit-clip-path:inset(50% 0 0 0)}.cuboid__mouth:after{content:"";height:35%;width:45%;border-radius:50%;position:absolute;bottom:-10%;right:0;background:#e63b19}.cuboid__eyes{width:80%;position:absolute;top:45%;left:50%;transform:translate(-50%);animation:blink 5s infinite}.cuboid__eyes>div{height:2vmin;width:2vmin;border-radius:50%;background:#000;position:absolute;transform:translateY(-50%)}.cuboid__eyes>div:after{content:"";background:#fff;height:20%;width:20%;border-radius:50%;position:absolute;top:20%;left:20%}.cuboid__eyes>div:nth-of-type(1){left:0}.cuboid__eyes>div:nth-of-type(2){right:0}:checked~.scene{animation:party 1s infinite linear}:checked~.scene .cuboid{animation:flip 2s infinite ease-out}:checked~.scene .cube-shadow{animation:shadow 1s infinite ease-out}:checked~.scene .cube-spin{animation:spin 2s 1s infinite ease-out}:checked~.scene .cube-squish{animation:squish 1s infinite ease-out}:checked~.scene .cube-wrap{animation:jump 1s infinite ease-out}:checked~.scene .cube-shadow{background:hsla(var(--hue, 0),80%,50%,.5)}:checked~.scene .demo-cuboid>div{background:hsl(var(--hue, 0),80%,calc(var(--lightness, 50) * 1%))}:checked~label{--on: 1}:checked~label span{animation:rock .1s infinite linear alternate}input{opacity:0;height:0;width:0;position:fixed;left:100%}label{--on: 0;height:2rem;width:4rem;background:transparent;border-radius:25%/50%;border:2px solid #fff;display:block;position:absolute;top:80%;left:50%;transform:translate(-50%,-50%);filter:grayscale(calc(1 - var(--on)));cursor:pointer;z-index:2}span{display:inline-block;font-size:2rem;line-height:2rem;transform:translate(calc(var(--on) * 100%));transition:transform .1s,filter .1s}@keyframes spin{0%,10%{transform:rotate(0)}40%,50%,to{transform:rotate(360deg)}}@keyframes flip{0%,10%{transform:translate3d(calc(var(--x, 0) * 1vmin),calc(var(--y, 0) * 1vmin),calc(var(--z, 5) * 1vmin)) rotateX(-90deg) rotateY(calc(var(--rotate-cuboid-y, 0) * 1deg)) rotate(calc(var(--rotate-cuboid-z, 0) * 1deg))}40%,50%,to{transform:translate3d(calc(var(--x, 0) * 1vmin),calc(var(--y, 0) * 1vmin),calc(var(--z, 5) * 1vmin)) rotateX(270deg) rotateY(calc(var(--rotate-cuboid-y, 0) * 1deg)) rotate(calc(var(--rotate-cuboid-z, 0) * 1deg))}}@keyframes squish{0%,to{transform:scaleZ(1) scale(1)}15%,95%{transform:scaleZ(.5) scale(1.15)}50%,85%{transform:scaleZ(1.25) scale(.5)}}@keyframes jump{0%,to{transform:translateZ(0)}15%,95%{transform:translateZ(0)}50%{transform:translateZ(15vmin)}}@keyframes shadow{0%,15%,95%,to{transform:scale(1);opacity:1}25%,85%{transform:scale(.65);opacity:.35}}@keyframes blink{0%,47%,49%,51%,to{transform:translate(-50%,-100%) scaleY(1)}48%,50%{transform:translate(-50%,-100%) scaleY(.1)}}@keyframes party{to{--hue: 360}}@keyframes rock{0%{transform:translate(calc(var(--on) * 100%)) rotate(-5deg)}to{transform:translate(calc(var(--on) * 100%)) rotate(5deg)}}