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}*,*:after,*:before{box-sizing:border-box;transform-style:preserve-3d;touch-action:none}:root{--bg: hsl(210 20% 12%);--size: 40;--rotation-y: -35;--rotation-x: -45}body{display:grid;place-items:center;min-height:100vh;background:var(--bg);font-family:Google Sans,sans-serif,system-ui}.scene{position:relative;transform:rotateX(calc(var(--rotation-y, 0) * 1deg)) rotateY(calc(var(--rotation-x, 0) * 1deg)) rotateX(0)}.scene-wrapper{--size: 50;height:calc(var(--size) * 1vmin);aspect-ratio:1;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) translateZ(calc((var(--count) - var(--index)) * 50vmin))}.scene{height:100%;aspect-ratio:1}main{transform:translateZ(100vmin)}.cube{--cube-depth: calc((((100 / var(--count, 18)) / 100) * var(--index, 0)) * var(--size));position:absolute;top:50%;left:50%;height:calc(var(--cube-depth) * 1vmin);aspect-ratio:1;transform:translate(-50%,-50%);z-index:calc(var(--count) - var(--index))}.cube{animation:play 4s calc((-18 + var(--index)) * .1s) infinite cubic-bezier(.5,.1,.5,.9) alternate}@keyframes play{0%{transform:translate(-50%,-50%) rotate(0) rotateX(0) rotate(0)}33%{transform:translate(-50%,-50%) rotate(90deg) rotateX(0) rotate(0)}66%{transform:translate(-50%,-50%) rotate(90deg) rotateX(90deg) rotate(0)}to{transform:translate(-50%,-50%) rotate(90deg) rotateX(90deg) rotate(90deg)}}.cuboid{--depth: var(--cube-depth);--color-range-lower: 180;--color-range-upper: 340;--step: calc((var(--color-range-upper) - var(--color-range-lower)) / var(--count));--alpha: calc(1 - ((.85 / var(--count)) * var(--index)));--color: hsl(calc(var(--color-range-lower) + (var(--step) * var(--index))) 80% 60% / var(--alpha))}.cuboid{width:100%;height:100%;position:relative}.cuboid__side{background:var(--bg);border:calc(var(--size) * .0075vmin) solid var(--color);position:absolute}.cuboid__side:nth-of-type(1){--b: 1.1;height:calc(var(--depth, 20) * 1vmin);width:100%;top:0;transform:translateY(-50%) rotateX(90deg)}.cuboid__side:nth-of-type(2){--b: .9;height:100%;width:calc(var(--depth, 20) * 1vmin);top:50%;right:0;transform:translate(50%,-50%) rotateY(90deg)}.cuboid__side:nth-of-type(3){--b: .5;width:100%;height:calc(var(--depth, 20) * 1vmin);bottom:0;transform:translateY(50%) rotateX(90deg)}.cuboid__side:nth-of-type(4){--b: 1;height:100%;width:calc(var(--depth, 20) * 1vmin);left:0;top:50%;transform:translate(-50%,-50%) rotateY(90deg)}.cuboid__side:nth-of-type(5){--b: .8;height:100%;width:100%;transform:translateZ(calc(var(--depth, 20) * .5vmin));top:0;left:0}.cuboid__side:nth-of-type(6){--b: 1.2;height:100%;width:100%;transform:translateZ(calc(var(--depth, 20) * -.5vmin)) rotateY(180deg);top:0;left:0}